Как сделать список опций в две колонки на CSS?
Всего 6 размеров. Как сделать отображение размеров в две колонки по 3 размера, причем в первой колонке s , m , l и во второй xl , xxl , xxxl ?
Отслеживать
user262779
задан 21 ноя 2018 в 18:22
ObehanProger ObehanProger
1,400 2 2 золотых знака 14 14 серебряных знаков 34 34 бронзовых знака
Возможный дубликат вопроса: Разделить параграф на две колонки
21 ноя 2018 в 19:13
@Air тут не параграф все-таки, больше про сетки речь
22 ноя 2018 в 10:38
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.size_block < column-count: 2; >label
Отслеживать
ответ дан 21 ноя 2018 в 19:05
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
.size_block < column-count: 2; >.size_block label
Вариант 2. CSS Flex колонки и ограничение высоты
.size_block < display: flex; flex-wrap: wrap; flex-direction: column; height: 60px; >.size_block label
Вариант 3. CSS Flex ряды и order
.size_block < display: flex; flex-wrap: wrap; width: 100%; >.size_block label < display: block; width: 50%; >.size_block label:nth-child(1) < order: 1; >.size_block label:nth-child(2) < order: 3; >.size_block label:nth-child(3) < order: 5; >.size_block label:nth-child(4) < order: 2; >.size_block label:nth-child(5) < order: 4; >.size_block label:nth-child(6)
Вариант 4. CSS Grid
.size_block < display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); >.size_block label
Колонки — Основы верстки контента
Создание колонок с текстом, до прихода стандарта CSS3, было достаточно сложным делом. Приходилось использовать различные свойства позиционирования и следить за тем, чтобы колонки не «развалились» в процессе добавления информации.
Посмотрите на пример выше. При всей визуальной легкости, создание такого макета вызывало трудности. Чаще всего проблема возникала в переносе текста в колонках. Для решения этой задачи использовали несколько блоков со строго отведенной информацией. Ни о каких автоматических переносах или изменении статьи не могло идти и речи.
Сейчас же эта задача решается всего двумя(!) свойствами. Эти и некоторые другие свойства мы рассмотрим в данном уроке.
Создание колонок
Для создания колонок в CSS существует свойство column-count . Оно полностью соответствует своему названию. Достаточно указать количество колонок и браузер все сделает за вас.
class="columns-2"> David Bowie, original name David Robert Jones, (born January 8, 1947, London, England—died January 10, 2016, New York, New York, U.S.), British singer, songwriter, and actor who was most prominent in the 1970s and best known for his shifting personae and musical genre hopping. To call Bowie a transitional figure in rock history is less a judgment than a job description. Every niche he ever found was on a cusp, and he was at home nowhere else—certainly not in the unmoneyed London suburb where his childhood was as dingy as his adult life would be glitzy. While this born dabbler’s favourite pose was that of a Great Artist beguiled by rock’s possibilities as a vehicle, in truth he was more a rocker drawn to artiness because it worked better than any other pose he had tried (not that he was not eclectic—he admired Anthony Newley and Jacques Brel and studied mime with Lindsay Kemp). .columns-2 column-count: 2; > Важно: информация внутри колонок обрабатывается «как есть». Это значит, что все отступы сохраняются. В случае с параграфами стоит сбрасывать верхний отступ. Это позволит держать первый параграф на одной линии с другими колонками.
.columns-2 p margin-top: 0; > По умолчанию колонки делятся равномерно внутри контейнера и суммарно они займут все доступное пространство. Повлиять на это поведение можно свойством column-width — с его помощью задается оптимальная ширина колонок. Слово «оптимальная» является главным. В отличие от свойства width , здесь не устанавливается четкая ширина, и, если места в контейнере хватает, то колонки будут растягиваться на всю доступную ширину.
Зачем нужно такое поведение? Представьте, что у нас есть длинный текст в две колонки. Например, как в первом изображении в этом уроке. Без указания оптимальной ширины браузер будет выстраивать две колонки при любой ширине устройства. Если эта ширина будет 300 пикселей, то колонки поделятся по 150 пикселей. Ужасная картина.
Чтобы не допустить такого, можно выставить оптимальную ширину. Если браузер не сможет выдать такую ширину колонке, то контент будет выстроен в одну колонку. Вот уже и адаптивность. А ведь это только первые уроки 🙂
.columns-2 column-count: 2; column-width: 250px; > Эту запись можно сократить. В CSS используется свойство columns для сокращения свойств column-count и column-width . Последний пример можно записать так:
.columns-2 columns: 250px 2; > Первым значением записывается ширина колонки, а вторым их количество
Перейдите на сайт CodePen и попробуйте сузить окно браузера. В определенный момент колонки уйдут, и весь текст будет выстроен в одну колонку.
Отступы между колонками
В примерах выше вы могли заметить, что браузеры автоматически проставляют отступы между колонками. Чаще всего не стоит доверять браузеру. Одно из правил верстки и программирования: явное лучше неявного. По умолчанию расстояние между колонками равно 1em . Единица измерения em отсчитывается от размера шрифта. Если размер шрифта равен 16 пикселям, то и 1em равен 16 пикселям.
Задать отступы между колонками можно с помощью свойства column-gap . Кстати, это свойство вы встретите еще много раз. Оно достаточно универсально.
Вы можете использовать различные единицы измерения внутри свойства column-gap . Для примера возьмем значения в пикселях. В будущих уроках вы познакомитесь и с другими единицами измерения.
.columns-2 columns: 250px 2; column-gap: 30px; > Попробуйте изменить значение свойства column-gap и посмотрите, как это повлияет на колонки.
Границы между колонками
Модуль CSS Multi-column Layout позволяет задавать визуальную границу между колонками. Если вы знакомы со свойством border , которое устанавливает границы у блоков, то поведение вам будет знакомо. Раньше создание границ между колонками необходимо было реализовывать самостоятельно, что тоже не радовало верстальщиков.
Для создания границы используется свойство column-rule , которое является краткой записью следующих свойств:
- column-rule-width — ширина границы.
- column-rule-style — тип границы. Значения совпадают со значениями свойства border .
- column-rule-color — цвет границы.
Вы можете указывать как три отдельных свойства, так и краткую запись.
.columns-2 columns: 250px 2; column-gap: 30px; column-rule: 2px solid black; > Добавление контента в несколько колонок
Если представить себе газету, то там не всегда текст идет строго по колонкам. Частая ситуация — заголовок, который накладывается на все колонки, как бы разделяя их по горизонтали.
Для разделения колонок используется свойство column-span . Оно принимает всего два значения:
- none — значение по умолчанию. Текст находится просто внутри колонок.
- all — текст «выходит из колонки» и разделяет их.
h2 text-align: center; column-span: all; > .columns-2 columns: 250px 2; column-gap: 30px; column-rule: 2px solid black; > Перенос колонок
В примерах можно заметить, что все элементы внутри колонок переносятся автоматически. Это неплохое решение для текста, но если существуют небольшие блоки, и нам явно не нужно, чтобы информация внутри них переносилась, то без помощи сторонних свойств не обойтись. Как же контролировать перенос контента внутри колонок? Для этого существует несколько правил, о которых поговорим в этом разделе.
- break-before
- break-after
- break-inside
По названию уже можно понять, что речь идет о переносе до/после и внутри. Все три свойства принимают огромное количество значений, так как рассчитаны не только для колонок, но и для вывода на печать.
При работе с CSS Multi-column Layout нас больше всего интересует значение avoid , которое запрещает перенос.
Взгляните на элемент figure. Он состоит из изображения и подписи к нему. Для наглядности обведем его границей и увидим, что изображение находится в одной колонке, а подпись уже в другой. Это плохой вариант верстки текста. Без границы совершенно непонятно что текст — лишь подпись изображения, а не самостоятельный текст.
Этот перенос происходит внутри элемента figure. Для запрета такого переноса можно воспользоваться свойством break-inside и запретить перенос внутри данного элемента.
figure border: 1px solid; break-inside: avoid; > Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Способы построения колонок в CSS
Мы рассмотрим варианты построения макета на основе 4 колонок. Во-первых, такое распределение информации является очень популярным, во-вторых, они хорошо перестраиваются в 2 колонки для планшетов и в одну для телефонов. В третьих, все размеры в примерах указаны в процентах, и при небольшом изменении ширины вы получите 2-х, 3-х или 5-6-колоночный макет.
Для начала определимся с размерами основного контейнера, в котором все колонки будут находится. Для него выделен класс .container с такими свойствами:
Свойства для .container
max-width : 1200px ;
margin : auto ;
padding-left : 15px ;
padding-right : 15px ;
border : 1px dotted #999 ;
Свойство border в нем необходимо для того, чтобы видеть, где находятся пределы родительского элемента. Кроме того, в большинстве случаев нам понадобится еще класс .row , который отвечает за одну линию (row — строку в переводе с англ. языка), и нужен для формирования внутренних колонок с классом .column . Правила для них смотрите в каждом примере на вкладке CSS.
Постоянными стилями для .row будут отрицательные внешние отступы слева и справа.
Стили класса .row во всех примерах
margin-left : -15px ;
margin-right : -15px ;
Остальные стили будут зависеть от способа формирования колонок.
Все примеры находятся на ресурсе codepen.io и могут быть открыты для редактирования на нем с помощью кнопки . Кроме того, примеры подразумевают наличие правил для различных разрешений экрана. Чтобы протестировать изменение внешнего вида при различных разрешениях экрана, переключитесь в Full Page View, щелкнув на кнопке Change View в правом верхнем углу. Кнопка Settings позволит вам посмотреть настройки для различных вкладок, например, увидеть ссылку на GoogleFonts для загрузки шрифта из примера.
Надеюсь, что с общими параметрами и настройками примеров все понятно, поэтому перейдем сразу к практике.
Варианты, основанные на Flexbox-модели
Flexbox-модель стала очень популярной за счет своей гибкости и легкости перестраивания размеров под любые разрешения экранов. Именно поэтому ее использует такие популярные фреймворки, как Bootstrap, Foundation, и другие.
Мы рассмотрим здесь 3 варианта построения колонок на основе Flexbox-модели, основанные на разных принципах.
Вариант 1. Колонки а-ля Bootstrap-4
Особенностью таких колонок является то, что они имеют размер в виде свойства flex: 0 0 25% , что делит ширину их контейнера на 4 равные части. Отступы формируются за счет правого и левого padding в 15px.
Колонки а-ля Bootstrap 4
max-width : 100% ;
flex : 0 0 25% ;
min-height : 1px ;
padding-left : 15px ;
padding-right : 15px ;
border : 1px dotted #939 ;
margin-bottom : 15px ;
В примере ниже видно, что рамки колонок «прилипают» друг к другу, но, если их убрать, отступы между колонками сформируются как раз за счет padding . Если вам нужно будет задать background-color , отличный от прозрачного или белого, придется внутри формировать какой-либо с собственными отступами-padding-ами, и background-color задавать уже для .inner .
Вариант 2. Колонки, распределяемые по ширине за счет свойства justify-content: space-between
В этом примере код для .column похож на предыдущий, за исключением того, что ширина колонки задана правилом flex: 0 0 24% , а для .row добавлено свойство justify-content: space-between . За счет этого колонки распределяются равномерно по всему контейнеру, а 1% от его ширины уйдет на формирование отступов между колонками.
Вариант 3. Колонки с внешними отступами
В этом варианте вместо padding-left и padding-right у нас появляются margin -ы. Однако внешние отступы не входят в модель расчета ширины элемента, основанной на свойстве box-sizing: border-box , в отличие от padding и border . Поэтому от ширины необходимо отнимать удвоенный размер margin (15px*2 = 30px). В результате получаем такие свойства.
Колонки с внешними отступами
max-width : 100% ;
flex : 0 0 calc ( 25% — 30px ) ;
min-height : 1px ;
border : 1px dotted #939 ;
margin : 15px ;
margin-top : 0 ;
Варианты 4-хколоночного макета на основе Grid
В случае с Grid (системой сеток) основным формирователем размеров может выступать, не класс .column , а класс .row . Поэтому стоит обращать внимание на список его свойств.
Способ 1. Использование grid-template-columns: 1fr 1fr 1fr 1fr и колонок с внешними отступами
В этом примере для класса .row назначено свойство grid-template-columns: 1fr 1fr 1fr 1fr , что обеспечивает одинаковую ширину для всех колонок. Для отступов, которые описаны в классе .column , использованы внешние margin: 15px .
Способ 2. Использование повторения и колонок с внутренними отступами
В этом примере для .row вроде бы использовано похожее на предыдущее свойство grid-template-columns: repeat(4, 25%) . Можно заменить это значение на grid-template-columns: repeat( auto-fit, 25%) или grid-template-columns: repeat( auto-fill, 25%) — вы получите аналогичный результат.
Также здесь вместо внешних отступов в классе .column были использованы внутренние padding-left и padding-right в 15px. Это не является обязательным. Вы можете использовать и вариант с margin-left и margin-right в 15px — в этом случае изменятся границы колонок.
Обратите внимание на стили в медиа-запросах. Они по сути похожи, но отличаются вариантами записи.
Использование колонок со свойством display: inline-block
Способ 1. Колонки только с внутренними отступами
По сравнению со строчными элементами строчно-блочные (а именно так можно перевести значение свойства display: inline-block ) позволяют нормально отобразить все отступы и ширину элемента, но выстраиваются в одну линию друг рядом с другом, а не один под другим, как блочные теги. Поэтому их вполне можно использовать для построения колонок. Тем не менее у них есть ряд особенностей, которые могут привести к непониманию того, почему последний элемент (колонка) съезжает вниз.
Собственно, в примере ниже учтено то, что после каждого inline-block-элемента образуется отступ в 1 пробельный символ, а также то, что колонки разной высоты выравниваются по нижней, а не по верхней линии.
Колонки с display: inline-block
display : inline-block ;
width : calc ( 25% — .2rem ) ;
vertical-align : top ;
min-height : 1px ;
padding-left : 15px ;
padding-right : 15px ;
border : 1px dotted #939 ;
margin-bottom : 15px ;
В примере использованы только внутренние отступы. Внешние совсем малы — порядка 3px — размер 1 пробельного символа.
Есть 1 серьезный минус у таких колонок по сравнению с вариантами Flexbox- или Grid-модели: если у колонок разная высота и для них задан background-color , то это будет довольно сильно бросаться в глаза. Выход здесь таков: задать минимальную высоту ( min-height ) для определенных разрешений экранов.
Способ 2. Колонки с внутренними и внешними отступами
В том случае, если вам необходимы и внутренние, и внешние отступы, код будет несколько сложнее. Вам придется немного заняться арифметикой, т.к. без расчетов здесь не обойтись. Во-первых, мы будем использовать только margin-right , margin-left нам не понадобится. Во-вторых, для последней колонки ( .column:last-of-type ) необходимо отключить margin-right , указав значение 0.
А теперь расчеты. Ширина контейнера = 100%. Мы отведем на каждую из колонок 24%, тогда на отступы между ними останется 100% — 24%*4 = 4% . Отступов у нас 3 (у 4-й колонки за ненадоностью мы его отключили), поэтому каждый оступ будет равен 4%/3 = 1.33% .
Колонки с display: inline-block c padding и margin
display : inline-block ;
width : calc ( 24% — .2rem ) ;
vertical-align : top ;
min-height : 1px ;
border : 1px dotted #939 ;
padding-left : 10px ;
padding-right : 10px ;
margin-right : 1.33% ;
margin-bottom : 15px ;
.column:last-of-type <
margin-right : 0 ;
Смотрим на реализацию. Обращаем внимание на свойства в медиа-запросах.
А вы думали, зачем вам в школе математика? Вот — пригодилась.
Использование CSS свойства columns
Вы можете задать количество колонок с помощью CSS-свойства columns . Достаточно поставить нужную цифру в качестве значения этого свойства для родительского элемента ( .row в примере) — и все будет работать. Есть нюанс с поддержкой более ранних версий браузеров, когда это свойство нужно использовать с вендорными префиксами:
- Firefox до версии 52 поддерживает свойство -moz-columns .
- Safari до версии 9, Chrome до версии 50 и Android до версии 80 поддерживают свойство -webkit-columns .
На самом деле, свойство columns далеко не единственное, которым вы можете управлять. В «компании» с ним есть еще column-gap , управляющее отступами между колонками, column-width — ширина колонок, column-rule , отвечающее за вывод разделительной линии между колонками, а также column-rule-color , column-rule-style и column-rule-width , которые управляют цветом, видом и толщиной разделительной линии по аналогии со свойством border-color , border-style и border-width для рамки (границы) в блочной модели. Для заголовков, которые должны находится над всеми колонками, можно использовать свойство column-span.
Использование свойств display: table + display: table-cell для колонок
Мы можем сформировать колонки на основе свойств display: table и display: table-cell , добавив их, соответственно, к классу .row и классу .column .
Внутри колонок есть внутренние отступы ( padding ), т.к. их можно задавать для ячеек. А вот внешние ( margin ) задавать бесполезно (можете раскомментировать строку 28 на вкладке CSS и убедиться самостоятельно. Для того чтобы задать внешние, необходимо использовать свойство, характерное для стилевого оформления таблиц, а именно border-spacing (раскомментируйте строку 19 примера).
Проблема этого варианта — в отсутствии гибкости для разных разрешений экрана — таблица «не гнется». Поэтому меняем display: table на block для .row и table-cell на inline-block для .column, а также пересчитываем длину и изменяем внешние отступы.
Маркированный список ul в две колонки через CSS2
Достаточно интересный способ организации обычного маркированного списка в две колонки.
Но проблема в том, они новые и не всеми браузерами поддерживаются. Тогда смысл их применять? Но можно воспользоваться CSS2 и этот способ был случайно мною “подсмотрен” на сайте Loco.ru у автора dIrm. Мною этот способ был немного доработан и помещен у себя в качестве копилки.
Колонка 1 Колонка 2 Колонка 3 Колонка 4 Колонка 5 Колонка 6 Колонка 7 Колонка 8 Колонка 9 Колонка 10 Колонка 11