각 요소의 너비가 같지만 아래쪽 요소가 항상 위쪽 요소보다 50px 아래에 있는 CSS 그리드 레이아웃을 사용하여 석조 그리드를 만들려면 어떻게 해야 합니까?

CSS 그리드 레이아웃(또는 기타 CSS)을 사용하여 벽돌 그리드 만들기

이 질문은 벽돌을 만드는 방법을 묻습니다. 높이가 다양한 요소를 사용하는 CSS의 그리드 효과. 각 요소의 너비는 동일하지만 아래쪽 요소는 항상 위쪽 요소보다 50px 아래에 있습니다. 사용자가 부동 소수점 및 Flexbox를 사용하려고 시도했지만 문제가 발생했습니다.

CSS 그리드 레이아웃 사용

해결책은 강력하고 그리드를 생성하는 유연한 방법. 다음 CSS 코드는 원하는 효과를 얻는 방법을 보여줍니다.

grid-container {
  display: grid;             /* Enables the grid layout */
  grid-auto-rows: 50px;      /* Defines the height of each row to 50px */
  grid-gap: 10px;            /* Sets the gap between the grid items */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Defines the columns to have a minimum width of 30% */
}

[short] {
  grid-row: span 1;         /* Makes the element span only one row */
  background-color: green;
}

[tall] {
  grid-row: span 2;         /* Makes the element span two rows */
  background-color: crimson;
}

[taller] {
  grid-row: span 3;         /* Makes the element span three rows */
  background-color: blue;
}

[tallest] {
  grid-row: span 4;         /* Makes the element span four rows */
  background-color: gray;
}

이 레이아웃을 사용하는 HTML 코드는 다음과 같습니다.

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

이 코드를 사용하면 벽돌 효과를 얻을 수 있습니다. 일관되고 반응적인 방식으로 배열된 다양한 높이의 요소로 구성된 그리드 효과.

위 내용은 각 요소의 너비가 같지만 아래쪽 요소가 항상 위쪽 요소보다 50px 아래에 있는 CSS 그리드 레이아웃을 사용하여 석조 그리드를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!