CSS 그리드를 사용하여 동일한 크기의 정사각형으로 반응형 4열 그리드 레이아웃을 만드는 방법은 무엇입니까?

CSS 그리드 정사각형 레이아웃

각 행에 4개의 정사각형이 포함된 정사각형으로 구성된 그리드 레이아웃을 만들고 싶습니다. 이러한 사각형은 화면 크기가 변경되어도 변형되지 않으며 항상 동일한 너비와 높이를 유지합니다(고정된 값은 바람직하지 않습니다). CSS 그리드가 필요합니다. 방법은 다음과 같습니다.

CSS를 사용하면 의사 요소를 통해 항상 1:1의 가로 세로 비율을 유지하거나 새로운 속성 가로 세로 비율을 사용할 수 있습니다. 예:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

위 내용은 CSS 그리드를 사용하여 동일한 크기의 정사각형으로 반응형 4열 그리드 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!