Как создать вид сетки / плитки? - PullRequest
Новая
       35

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

118 голосов
/ 12 декабря 2011

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

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

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

enter image description here

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

enter image description here

Ответы [ 8 ]

76 голосов
/ 12 декабря 2011

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

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

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

25 голосов
/ 30 января 2016

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

  1. Поместить элементы в многострочный столбец flex-контейнера.порядок 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 */

  2. Принудительный разрыв столбца перед первым элементом каждого столбца: 

    #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; }
<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>
10 голосов
/ 06 марта 2017

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

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

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

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

Вот и мы: 

.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;
    }
}
<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">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 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>
4 голосов
/ 04 февраля 2016

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

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

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

1 голос
/ 08 апреля 2018

Вы можете использовать отображение: сетка

, например:

Это сетка с 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 /

1 голос
/ 27 марта 2017

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

CodePen demo

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;
}
<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

Codepen demo

Проблемы:

  • Пробелы между выигранными предметамине будет одинаковым
  • Вы должны вручную установить большие / высокие элементы на 2 или более строк
  • Ограниченная поддержка браузера :)
1 голос
/ 31 августа 2015

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

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

0 голосов
/ 22 мая 2018

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

.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;
}
<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

на основе этого кодового пера Рэйчел Эндрю Ф.Т.W

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...