CSS 그리드 레이아웃으로 벽돌 그리드 효과를 만드는 방법은 무엇입니까?

석조 그리드 효과를 위한 CSS 그리드 레이아웃 생성

과제: 균일하지 않은 높이 그리드 요소

석조 그리드 효과를 얻으려면 다음을 수행해야 합니다. 아래의 요소 위치에 영향을 주지 않고 완벽하게 정렬되도록 다양한 높이의 요소를 정렬합니다. 그러나 float 또는 flexbox와 같은 전통적인 방법은 이 요구 사항을 완전히 충족하지 못할 수 있습니다.

해결책: CSS 그리드 레이아웃

최적의 성능을 위해 특별히 설계된 강력한 도구인 CSS 그리드 레이아웃을 활용하는 것이 좋습니다. 복잡한 그리드 레이아웃:

1. 그리드 속성 정의(grid-container): 디스플레이: 그리드로 그리드 컨테이너를 정의하는 것으로 시작합니다. Grid-auto-rows를 원하는 기본 행 높이(예: 50px)로 설정합니다. Grid-gap은 그리드 요소 사이의 간격을 제어합니다.
2. 열 자동 설정(grid-template-columns): 반복(auto-fill, minmax(30%, 1fr))을 사용하여 생성합니다. 사용 가능한 공간에 따라 너비가 자동으로 조정되는 열입니다. 최소 30%는 요소의 너비가 충분한 것을 보장합니다.
3. 행 범위 조정(그리드-행): 개별 요소에 대해 그리드 행 속성을 사용하여 해당 요소가 차지하는 행 수를 결정합니다. 원하는 높이에 따라 범위 1, 범위 2 등을 지정하기만 하면 됩니다.

예:

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

.short {
  grid-row: span 1;
}

.tall {
  grid-row: span 2;
}

.taller {
  grid-row: span 3;
}

.tallest {
  grid-row: span 4;
}

이 코드는 요소의 너비가 자동으로 변하는 그리드를 생성합니다. 그리드 정렬에 영향을 주지 않고. 각 요소의 높이는 지정된 행 범위에 따라 결정됩니다.

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