CSS 그리드를 사용하여 반응형 정사각형 그리드 레이아웃을 어떻게 만들 수 있나요?

CSS 그리드를 사용하여 정사각형 그리드 레이아웃 만들기

CSS를 사용하면 각 행에 4개의 정사각형이 있는 정사각형 레이아웃을 만들 수 있습니다. 그리드. 화면 크기가 조정되더라도 사각형의 모양이 유지되도록 하려면 고정된 값을 사용하지 않는 것이 중요합니다.

예제 코드

다음 코드는 이러한 사각형을 만드는 방법을 보여줍니다. 레이아웃:

.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>

설명

• .container 요소는 다음과 같이 표시하도록 설정되었습니다. 그리드 및 동일한 4개의 열이 있는 그리드 템플릿을 사용합니다. width.
• grid-gap 속성은 그리드 사이에 5px 간격을 추가합니다. 사각형.
• .container div 선택기로 표시되는 각 사각형은 배경색이 빨간색입니다.
• 최신 브라우저에서 지원하는 가로 세로 비율 속성은 1:1 비율을 유지하는 데 사용됩니다. 각 정사각형의 가로 세로 비율을 지정하여 화면 크기나 방향에 관계없이 정사각형을 유지합니다.

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