Например, у меня есть класс .article, и я хочу видеть этот класс в виде сетки. Итак, я применил этот стиль:
.article{
width:100px;
height:100px;
background:#333;
float:left;
margin:5px;
}
В этом стиле .article будет выглядеть мозаично / сеткой. Он отлично работает с фиксированной высотой. Но если я хочу установить высоту автоматически (автоматически растягиваться в соответствии с данными в ней), сетка выглядит неприятно.
И я хочу сделать такой вид:
Вы можете использовать flexbox.
Поместите элементы в гибкий контейнер с многострочным столбцом
Измените порядок элементов так, чтобы порядок DOM соблюдался по горизонтали, а не по вертикали. Например, если вам нужно 3 столбца,
Разрыв столбца перед первым элементом каждого столбца:
К сожалению, не все браузеры пока поддерживают разрывы строк в flexbox. Однако он работает в Firefox.
Показать фрагмент кода
источник
Теперь, когда CSS3 широко доступен и совместим с основными браузерами, пришло время для чистого решения, оснащенного инструментом сниппета SO:
Для создания макета кирпичной кладки с использованием CSS3 будет достаточно
column-count
вместе сcolumn-gap
. Но я такжеmedia-queries
делал его отзывчивым.Прежде чем погрузиться в реализацию, учтите, что было бы намного безопаснее добавить резервную библиотеку jQuery Masonry, чтобы сделать ваш код совместимым с устаревшим браузером, особенно IE8-:
Вот так:
источник
masonry bricks
. Столбец упорядочивает вещи сверху вниз, вопрос заключался в том, чтобы порядок оставался неизменным по горизонтали, а не переключался на вертикальный. Например, самый короткий блок, найденный выше, ДОЛЖЕН находиться в третьем столбце, но в верхней строке.Лучший вариант решить эту проблему с помощью только css - использовать свойство css column-count.
Проверьте это для получения дополнительной информации: https://developer.mozilla.org/en/docs/Web/CSS/column-count
источник
например:
Это сетка с 7 столбцами, и ваши строки имеют автоматический размер.
Для получения дополнительной информации перейдите по следующей ссылке: https://css-tricks.com/snippets/css/complete-guide-grid/
источник
С помощью модуля CSS Grid вы можете создать довольно похожий макет.
Демо CodePen
1) Установите три столбца сетки фиксированной ширины
2) Убедитесь, что предметы с большой высотой занимают 2 ряда.
Показать фрагмент кода
Демо Codepen
Проблемы:
источник
и если вы хотите пойти еще дальше, чем кладка, используйте изотоп http://isotope.metafizzy.co/, это расширенная версия каменной кладки (разработанная тем же автором), это не чистый CSS, он использует помощь Javascript но он очень популярен, поэтому вы найдете множество документов
если вы находите это очень сложным, то есть много плагинов премиум-класса, которые уже основывают свою разработку на изотопах, например Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020
источник
Вот один пример на основе сетки .
на основе этой кодовой ручки Рэйчел Эндрю FTW
источник