마지막으로 석조 레이아웃을 생성하는 CSS 전용 솔루션

기다리다! 아래 기능은 실험적이며 Firefox에서만 테스트할 수 있습니다.

CSS Grid Level 3의 사양은 실제로 구성 중이며 석조 배치에 관한 것입니다.

This module introduces masonry layout as an additional layout mode for CSS Grid containers.

도대체 메이슨이 뭐야?

Pinterest를 탐색할 때 표시되는 내용입니다. 아래와 같은 것:


연결된 사양에서 가져온 그림

우리는 이것을 JS 또는 많은 해킹 CSS를 사용하여 빌드했지만 지금은 하나의 CSS 속성만 가능합니다.

.container {
  grid-template-rows: masonry; 
}

그래 이것만!

전체 코드는 다음과 같습니다.

<div class="container">
  <img src="https://picsum.photos/id/1/200/300">
  <img src="https://picsum.photos/id/17/200/400">
  <img src="https://picsum.photos/id/18/200/100">
  <img src="https://picsum.photos/id/109/200/200">
  <img src="https://picsum.photos/id/1069/200/600">
  <img src="https://picsum.photos/id/120/200/150">
  <img src="https://picsum.photos/id/130/200/100">
  <img src="https://picsum.photos/id/203/200/100">
  <img src="https://picsum.photos/id/109/200/200">
  <img src="https://picsum.photos/id/11/200/100">
  <img src="https://picsum.photos/id/119/200/100">
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fil, minmax(200px, 1fr));
  grid-template-rows: masonry; /* this will do the magic */
  grid-gap: 10px;
}
img {
  width:100%;
}

Firefox에서 위를 테스트할 수 있지만 먼저 플래그를 활성화해야 합니다.

Firefox를 열고 URL 표시줄에 about:config 쓰기

masonry를 사용하여 검색

하나의 플래그를 얻을 수 있습니다. 사실로 만드십시오

다음 결과를 얻어야 합니다.


repeat(auto-fil, minmax(200px, 1fr)) 덕분에 완벽하게 반응합니다.



아래와 같이 CSS를 조정하여 다른 방향을 가질 수도 있습니다.

.container {
  display: grid;
  grid-template-rows: repeat(auto-fil, minmax(200px, 1fr));
  grid-template-columns: masonry; 
  grid-gap: 10px;
  height:100vh;
}
img {
  height:100%;
}

이 사양은 석조 그리드를 제어하기 위해 다른 많은 속성을 도입하지만 언제든지 변경될 수 있으므로 조사하기에는 아직 이르다.

CSS Grid Level 2은 아직 모든 브라우저에서 완전히 구현되지 않았으므로 레벨 3을 기다려야 합니다.