Flexbox
Динамическая разметка каменной кладки невозможна с помощью flexbox, по крайней мере, в чистом и эффективном виде.
Flexbox - это система одномерного макета. Это означает, что он может выравнивать элементы по горизонтальным ИЛИ вертикальным линиям. Гибкий элемент ограничен своей строкой или столбцом.
Настоящая сетка двумерна, то есть она может выравнивать элементы по горизонтальным И вертикальным линиям. Элементы содержимого могут одновременно охватывать строки и столбцы, чего не могут сделать гибкие элементы.
Вот почему возможности flexbox для построения сеток ограничены. Это также причина, по которой W3C разработал другую технологию CSS3, Grid Layout .
row wrap
В гибком контейнере с flex-flow: row wrapгибкими элементами должны быть перенесены в новые строки .
Это означает, что гибкий элемент не может быть перенесен под другой элемент в той же строке .
Обратите внимание на то, как div # 3 оборачивается под div # 1 , создавая новую строку. Он не может быть заключен в div # 2 .
В результате, когда элементы не самые высокие в ряду, остается пустое пространство, создавая неприглядные зазоры.
column wrap
Если вы переключитесь на flex-flow: column wrap, сетка станет более доступной. Однако контейнер с направлением столбца сразу же имеет четыре потенциальных проблемы:
- Элементы Flex перемещаются вертикально, а не горизонтально (как вам нужно в этом случае).
- Контейнер расширяется по горизонтали, а не по вертикали (как макет Pinterest).
- Для этого требуется, чтобы контейнер имел фиксированную высоту, чтобы предметы знали, где их оборачивать.
- На момент написания этой статьи он имеет недостаток во всех основных браузерах, в которых контейнер не расширяется для размещения дополнительных столбцов .
В результате контейнер в направлении столбца не подходит в этом случае, как и во многих других случаях.
CSS Grid с неопределенными размерами элементов
Макет сетки был бы идеальным решением вашей проблемы, если бы можно было заранее определить различную высоту элементов контента . Все остальные требования находятся в пределах возможностей Grid.
Необходимо знать ширину и высоту элементов сетки, чтобы закрыть пробелы с окружающими элементами.
Таким образом, Grid, который является лучшим CSS, который может предложить для построения горизонтального макета кирпичной кладки, в этом случае не справляется.
Фактически, пока не появится технология CSS, способная автоматически закрывать пробелы, у CSS вообще нет решения. Что-то вроде этого, вероятно, потребует перекомпоновки документа, поэтому я не уверен, насколько это будет полезно или эффективно.
Вам понадобится сценарий.
Решения JavaScript, как правило, используют абсолютное позиционирование, которое удаляет элементы контента из потока документов, чтобы переупорядочить их без пропусков. Вот два примера:
CSS Grid с определенными размерами элементов
Для макетов, в которых известны ширина и высота элементов содержимого, вот горизонтальный макет кладки на чистом CSS:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Как это устроено
- Создайте контейнер сетки на уровне блоков. (
inline-gridбыл бы другой вариант)
grid-auto-rowsСвойство задает высоту автоматически генерируемых строк. В этой сетке каждая строка имеет высоту 50 пикселей.grid-gapСвойство является обобщающим для grid-column-gapи grid-row-gap. Это правило устанавливает промежуток в 10 пикселей между элементами сетки. (Это не относится к области между предметами и контейнером.)grid-template-columnsСвойство устанавливает ширину явно определенных столбцов.
repeatОбозначения определяет образец повторяющихся столбцов (или строк).
auto-fillФункция сообщает сетку выстраиваться столько столбцов (или строк) , как это возможно без переполнения контейнера. (Это может создать поведение, подобное гибкому макету flex-wrap: wrap.)
minmax()Функция устанавливает минимальный и максимальный диапазон размеров для каждого столбца (или строки). В приведенном выше коде ширина каждого столбца будет составлять минимум 30% контейнера и максимум доступного свободного места.
frБлок представляет собой долю свободного пространства в контейнере сетки. Это сопоставимо со flex-growсвойством flexbox .
С помощью grid-rowи spanмы сообщаем элементам сетки, сколько строк они должны занимать.
Поддержка браузером CSS Grid
- Chrome - полная поддержка с 8 марта 2017 г. (версия 57)
- Firefox - полная поддержка с 6 марта 2017 г. (версия 52)
- Safari - полная поддержка с 26 марта 2017 г. (версия 10.1)
- Edge - полная поддержка с 16 октября 2017 г. (версия 16)
- IE11 - нет поддержки текущей спецификации; поддерживает устаревшую версию
Вот полная картина: http://caniuse.com/#search=grid
Классная функция наложения сетки в Firefox
В инструментах разработчика Firefox, когда вы проверяете контейнер сетки, в объявлении CSS есть крошечный значок сетки. При щелчке он отображает контур вашей сетки на странице.
Подробнее здесь: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
