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

129

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

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

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

여기에 이미지 설명을 입력하십시오

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

여기에 이미지 설명을 입력하십시오

— 아리아나 리안
소스

78

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

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

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

— 책장
소스

3

여기 에 CSS3 방법을 추가했습니다 !

— behradkhodayar

27

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>

스 니펫 확장

— 오리올
소스

와우, 이것은 오래된 질문이었습니다. 그리고 flexbox를 사용하여 벽돌 레이아웃을 시뮬레이션하는 것이 최선의 방법은 아닙니다. 스 니펫이 작동하지 않습니다 : D, 여기서 요점을 놓친 것 같습니다. 이 문제를 해결하기위한 다른 해결 방법은 CSS3 열을 사용하는 것입니다. 답변에 감사드립니다

— Ariona Rian

1

@ArionaRian Firefox에서 스 니펫을 사용해보십시오. 다른 브라우저는 아직 강제 줄 바꿈을 지원하지 않습니다. 그리고 CSS 열도 작동하지만 레이아웃보다 텍스트 용으로 설계된 flexbox와는 다릅니다.

— Oriol

예, 그것이 문제입니다 :), 그래서 지금까지 우리는 여전히 이런 종류의 디자인을 레이아웃하기 위해 벽돌 / 동위 원소 플러그인을 고수하고 있습니다.

— Ariona Rian

그냥 디스플레이를 넣어 : flex; 플렉스 랩 : 랩; 컨테이너에 있으며 Chrome, Firefox, Safari, IE11 (Win11 및 Win7)에서 완벽하게 작동합니다. 그래도 최소 높이에주의하십시오 ( caniuse.com/#search=flex-wrap 참조 )

— LBJ

@LBJ 그러나 요소는 행으로 배열됩니다. 이것은 바람직한 행동이 아닙니다

— Oriol

11

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>

스 니펫 확장

— 버 라드 코다 야르
소스

벽돌과 컨테이너의 품목 사이에 동일한 간격을 두는 방법을 알고 있습니까?

— intcreator

5

좋지만 많은 사람들에게을 (를) 주문해야합니다 masonry bricks. 기둥은 물건을 위에서 아래로 주문하며, 질문은 수직으로 전환하지 않고 수평을 동일하게 유지하도록 요청했습니다. 예를 들어, 위에서 발견 된 가장 짧은 블록은 세 번째 열이지만 맨 위 행에 있어야합니다.

— jscul

4

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

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

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

— 패트리시오 가브리엘 마세 다
소스

3

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

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

열이 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/

— vrbsm
소스

2

으로 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 개 이상의 행에 걸쳐 큰 / 높은 항목을 수동으로 설정해야합니다.
제한된 브라우저 지원 :)

— 다니엘 드
소스

1

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

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

— 사용자
소스

1

그리드 기반 예제 가 하나 있습니다 .

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

스 니펫 확장

이 코드 펜 을 기반으로 Rachel Andrew FTW

— 블라디미르이 센코
소스