CSS에서 다양한 높이로 벽돌 그리드 레이아웃을 만드는 방법은 무엇입니까?

Flexbox 또는 기타 레이아웃을 사용한 CSS Masonry 그리드

요소의 높이가 다양한 CSS에서 그리드 레이아웃을 만드는 것은 어려울 수 있습니다. Flexbox는 유연성을 제공하지만 새로운 요소가 이전 요소의 아래쪽에 정렬되어야 한다는 요구 사항을 충족하지 못할 수 있습니다.

CSS 그리드 레이아웃 소개

Flexbox 대신 다음을 고려하세요. 이를 위해 CSS 그리드 레이아웃을 활용합니다. 석조 그리드를 구현하는 더욱 강력하고 직관적인 방법을 제공합니다:

HTML 구조:

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

CSS:

grid-container {
  display: grid;                                 
  grid-auto-rows: 50px;                         
  grid-gap: 10px;                               
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));  
}

[short] {
  grid-row: span 1;                                
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

설명:

1. display:grid: 컨테이너를 그리드로 초기화합니다. 레이아웃.
2. grid-auto-rows: 50px: 각 그리드 행의 높이를 50픽셀로 설정합니다.
3. grid-gap: 10px: 그리드 사이의 간격을 지정합니다 items.
4. grid-template-columns: 그리드에 있는 열 수(자동 채우기)와 각 열의 최소 너비(최소 내용: 30%, 1fr)를 정의합니다. .
5. grid-row:span X: 항목이 X개의 그리드를 차지해야 함을 나타냅니다. 행.

위 내용은 CSS에서 다양한 높이로 벽돌 그리드 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!