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

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



.article{

  width:100px;

  height:100px;

  background:#333;

  float:left;

  margin:5px;

}


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



enter image description here



и я хочу сделать вид такой:



enter image description here

858   8  

8 ответов:

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

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

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

74  
2016-02-17 22:13:11

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

  1. поместите элементы в многострочный контейнер flex столбца

    #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; }
<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>
23  
2016-01-30 04:00:18

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

для создания кладка макет с использованием 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>
8  
2017-03-05 23:44:37

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

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

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

4  
2016-02-04 15:21:38

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

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

1  
2015-08-31 18:43:34

вы можете использовать display: 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/

1  
2018-07-02 00:53:45

С модуль сетки CSS вы можете создать очень похоже макет.

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 демо

проблемы:

  • пробелы между элементами не будет униформа
  • вы должны вручную установить большие / высокие элементы, чтобы охватить 2 или более строк
  • ограниченная поддержка браузера :)
1  
2018-07-02 00:54:14

есть один С пример.

.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>

на основе этого кода-pen by Rachel Andrew F. T. W

0  
2018-05-22 21:06:21

Comments

    Ничего не найдено.
Click here to cancel reply.