동일한 크기의 정사각형으로 구성된 반응형 CSS 그리드 레이아웃을 만드는 방법은 무엇입니까?

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

이 질문은 각 정사각형이 종횡비를 유지하는 정사각형으로 구성된 CSS 그리드 레이아웃을 만드는 복잡한 과정을 탐구합니다. 화면 크기를 조정하는 동안

레이아웃

이 레이아웃을 얻으려면 다음 CSS 코드를 고려하세요.

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

코드 이해

• 디스플레이: Grid;: 컨테이너의 그리드 레이아웃을 활성화합니다. element.
• grid-template-columns: 1fr 1fr 1fr 1fr;: 너비가 동일한 4개의 열로 그리드를 정의합니다(1fr = 사용 가능한 공간의 1분의 1).
• grid-gap: 5px ;: 그리드 셀 사이에 5픽셀 간격을 설정합니다.
• background-color: red;: 그리드 셀 스타일을 지정합니다. 빨간색 배경.
• aspect-ratio: 1;: 각 셀의 가로세로 비율을 1:1로 유지합니다. 이 속성을 사용하면 화면 크기에 관계없이 정사각형이 정사각형 모양으로 유지됩니다.

이 접근 방식을 사용하면 크기 조정 중에 가로 세로 비율을 유지하는 정사각형 그리드를 생성하여 유연하고 반응성이 뛰어난 레이아웃을 제공할 수 있습니다.

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