Как создать вид сетки / плитки?

Например, у меня есть некоторый class .article, и я хочу, чтобы этот class рассматривался как вид сетки. Поэтому я применил этот стиль:

.article{ width:100px; height:100px; background:#333; float:left; margin:5px; } 

Этот стиль заставит текст выглядеть черепицей / сеткой. Он отлично работает с фиксированной высотой. Но если я хочу, чтобы высота была автоматической (автоматически растягивается в соответствии с данными внутри нее), grid выглядит противно.

введите описание изображения здесь

И я хочу сделать следующее:

введите описание изображения здесь

Этот тип макета называется масонским макетом . Масонство – это еще один макет сетки, но он заполнит пробелы, вызванные разностью высот элементов.

jQuery Masonry является одним из плагинов jQuery для создания макетного макета.

Кроме того, вы можете использовать column CSS3. Но на данный момент плагин на основе jQuery – лучший выбор, поскольку проблема совместимости с столбиком CSS3.

Вы можете использовать flexbox.

  1. Поместите свои элементы в контейнер для гибких контейнеров из многострочной колонны

     #flex-container { display: flex; flex-flow: column wrap; } 
  2. Измените порядок элементов, чтобы порядок DOM соблюдался горизонтально, а не вертикально. Например, если вам нужны 3 столбца,

     #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */ 
  3. Принудительный разрыв столбца перед первым элементом каждого столбца:

     #flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ } 

    К сожалению, не все браузеры поддерживают разрывы строк в flexbox. Однако он работает на Firefox.

 #flex-container { display: flex; flex-flow: column wrap; } #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */ #flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ } /* The following is optional */ #flex-container > div { background: #666; color: #fff; margin: 3px; display: flex; justify-content: center; align-items: center; font-size: 36px; } #flex-container > :nth-child(1) { height: 100px; } #flex-container > :nth-child(2) { height: 50px; } #flex-container > :nth-child(3) { height: 75px; } #flex-container > :nth-child(4) { height: 50px; } #flex-container > :nth-child(5) { height: 100px; } #flex-container > :nth-child(6) { height: 50px; } #flex-container > :nth-child(7) { height: 100px; } #flex-container > :nth-child(8) { height: 75px; } #flex-container > :nth-child(9) { height: 125px; } 
 
1
2
3
4
5
6
7
8
9

Теперь, когда CSS3 широко доступен и совместим с основными браузерами, его время для чистого решения, оснащенного инструментами SO:


Для создания макетного макета с использованием CSS3 достаточно column-count column-gap . Но я также использовал media-queries чтобы сделать его отзывчивым.

Прежде чем погрузиться в реализацию, учтите, что было бы гораздо безопаснее добавить резервную копию библиотеки максона jQuery, чтобы сделать ваш код совместимым для старого браузера, особенно IE8-:

  

Вот так:

 .masonry-brick { color: #FFF; background-color: #FF00D8; display: inline-block; padding: 5px; width: 100%; margin: 1em 0; /* for separating masonry-bricks vertically*/ } @media only screen and (min-width: 480px) { .masonry-container { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 768px) { .masonry-container { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 960px) { .masonry-container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } 
 
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3

Лучший способ решить это с помощью только css – использовать свойство css column-count.

  .content-box { border: 10px solid #000000; column-count: 3; } 

Проверьте это для получения дополнительной информации: https://developer.mozilla.org/en/docs/Web/CSS/column-count

и если вы хотите пойти еще дальше, чем кладка, используйте изотоп http://isotope.metafizzy.co/, это расширенная версия масонства (разработанная тем же автором), это не чистый CSS, он использует помощь Javascript но он очень популярен, поэтому вы найдете множество документов

если вы обнаружите, что это очень сложно, есть много плагинов премиум-classа, которые уже основывали свое развитие на изотопе, например медиа-боксы http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Вы можете использовать display: grid

например:

Это grid с 7 столбцами, а ваши ряды имеют автоматический размер.

 .myGrid{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: auto; grid-gap: 10px; justify-items: center; } 

Для получения дополнительной информации обратитесь к следующей ссылке: https://css-tricks.com/snippets/css/complete-guide-grid/

С помощью CSS Grid Module вы можете создать довольно похожий макет.

Демо-версия CodePen

1) Установите три столбца сетки фиксированной ширины

 ul { display: grid; grid-template-columns: 150px 150px 150px; ... } 

2) Убедитесь, что элементы с большой высотой занимают 2 строки

 li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } 
 body { margin: 0; } ul { display: grid; grid-template-columns: 150px 150px 150px; grid-gap: 1rem; justify-content: center; align-items: center; /* boring properties: */ list-style: none; width: 90vw; height: 85vh; margin: 4vh auto; border: 5px solid green; padding: 1rem; overflow: auto; counter-reset: item; } li { position: relative; } li:after { content: counter(item); counter-increment: item; position: absolute; padding: 0.3rem; background: salmon; color: white; left:0; top:0; } img { outline: 5px solid salmon; } li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } направо body { margin: 0; } ul { display: grid; grid-template-columns: 150px 150px 150px; grid-gap: 1rem; justify-content: center; align-items: center; /* boring properties: */ list-style: none; width: 90vw; height: 85vh; margin: 4vh auto; border: 5px solid green; padding: 1rem; overflow: auto; counter-reset: item; } li { position: relative; } li:after { content: counter(item); counter-increment: item; position: absolute; padding: 0.3rem; background: salmon; color: white; left:0; top:0; } img { outline: 5px solid salmon; } li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } 
 

Существует один пример на основе сетки .

 .grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); grid-auto-flow: dense; padding: 10px; } .grid-layout .item { padding: 15px; color: #fff; background-color: #444; } .span-2 { grid-column-end: span 2; grid-row-end: span 2; } .span-3 { grid-column-end: span 3; grid-row-end: span 4; } 
 
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
Давайте будем гением компьютера.