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

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

Susan Sarandon
풀어 주다: 2024-12-26 09:18:10
원래의
730명이 탐색했습니다.

How to Create a Responsive 4-Column Grid Layout with Equal-Sized Squares Using CSS Grid?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿