CSS만 사용하여 불변 정사각형 요소의 반응형 그리드를 어떻게 만들 수 있나요?

CSS를 사용하여 불변 정사각형 요소의 그리드 레이아웃 생성

이 쿼리의 목표는 정사각형 요소로 구성된 그리드 시스템을 구축하는 것입니다. 화면 크기 조정에 관계없이 크기를 유지합니다. 고정된 값이 필요하지 않으며 CSS 그리드 구현이 필수입니다.

이를 달성하기 위한 한 가지 효과적인 방법은 의사 요소를 활용하여 일관된 1:1 종횡비를 유지하는 것입니다. 또는 아래 그림과 같이 최신 'aspect-ratio' 속성을 사용할 수 있습니다.

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

제공된 HTML 코드 내에서 각 'div' 요소는 사각형을 나타냅니다.

<div>

이 접근 방식을 사용하면 화면 크기를 조정할 때 정사각형 요소가 종횡비를 유지하고 왜곡되지 않은 상태로 유지됩니다.

위 내용은 CSS만 사용하여 불변 정사각형 요소의 반응형 그리드를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!