[css] 그리드 / 타일 뷰를 만드는 방법?

예를 들어 클래스 .article이 있고이 클래스를 그리드보기로보고 싶습니다. 그래서 나는이 스타일을 적용했습니다 :

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

이 스타일은 .article을 타일 / 그리드처럼 보이게합니다. 고정 된 높이로 잘 작동합니다. 그러나 높이를 자동으로 설정하려면 (그 안의 데이터에 따라 자동으로 늘림) 그리드가 불쾌하게 보입니다.

그리고 나는 이것을 다음과 같이 만들고 싶다 :

답변

이러한 유형의 레이아웃을 Masonry layout 이라고 합니다 . 벽돌은 또 다른 그리드 레이아웃이지만 요소의 높이 차이로 인한 공백을 채울 것입니다.

jQuery Masonry 는 벽돌 레이아웃을 생성하는 jQuery 플러그인 중 하나입니다.

또는 CSS3을 사용할 수 있습니다 column. 그러나 현재 CSS3 열과의 호환성 문제가 있기 때문에 jQuery 기반 플러그인이 최선의 선택입니다.

답변

flexbox를 사용할 수 있습니다.

여러 줄로 된 열 플렉스 컨테이너에 요소 배치

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

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 */

각 열의 첫 번째 항목 앞에 열 나누기를 강제하십시오.
```
#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>

스 니펫 확장

답변

CSS3는 주요 브라우저를 통해 광범위하게 사용 가능하고 호환되므로 SO의 스 니펫 도구가 장착 된 순수한 솔루션을 사용해야합니다.

만들기 위해 벽돌을 CSS3의 사용 레이아웃 column-count과 함께이 column-gap충분합니다. 그러나 나는 또한 media-queries그것을 반응 적으로 만들었습니다.

구현에 뛰어 들기 전에 코드가 기존 브라우저, 특히 IE8-에 호환되도록 jQuery Masonry 라이브러리 폴백을 추가하는 것이 훨씬 안전하다는 것을 고려하십시오.

<!--[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>

스 니펫 확장

답변

CSS만으로 해결하는 가장 좋은 옵션은 CSS 열 개수 속성을 사용하는 것입니다.

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

자세한 내용은 https://developer.mozilla.org/en/docs/Web/CSS/column-count를 참조하십시오.

답변

당신은 디스플레이를 사용할 수 있습니다 : 그리드

예를 들면 다음과 같습니다.

열이 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 그리드 모듈 당신은 만들 수 있습니다 매우 유사한 레이아웃을.

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;
}

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

스 니펫 확장

코드 펜 데모

문제 :

아이템 사이의 간격이 일정하지 않습니다
2 개 이상의 행에 걸쳐 큰 / 높은 항목을 수동으로 설정해야합니다.
제한된 브라우저 지원 🙂

답변

그리고 벽돌보다 더 나아가고 싶다면 isotope http://isotope.metafizzy.co/를 사용 하십시오. 동일한 저자가 개발 한 벽돌의 고급 버전입니다. 순수한 CSS가 아니며 Javascript의 도움을 사용합니다 하지만 매우 인기가 많으므로 많은 문서를 찾을 수 있습니다.

매우 복잡하다고 생각되면 이미 동위 원소 기반 개발을 기반으로 한 많은 프리미엄 플러그인이 있습니다 (예 : 미디어 박스 http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020