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

동일한 크기의 정사각형을 사용한 반응형 그리드 레이아웃

문제:

균등한 크기의 정사각형으로 구성된 반응형 그리드 레이아웃을 고안합니다. , 조정 가능한 거터 간격이 있습니다. CSS 그리드와 Flexbox 접근 방식을 모두 고려하세요.

해결책:

패딩 트릭을 사용하는 CSS 그리드:

"패딩 활용" -bottom" 트릭은 제곱 비율을 강제합니다. 원하는 정사각형 종횡비(예: 100%)에 해당하는 패딩 바닥 백분율을 사용하여 의사 요소를 추가합니다. 이는 정사각형 컨테이너의 고정 높이를 시뮬레이션합니다.

.square {
  position: relative;
  ...
  padding-bottom: 100%;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

절대 위치 지정이 포함된 Flexbox:

의사 요소가 있는 Flexbox 레이아웃을 사용합니다. 의사 요소의 높이를 정사각형 종횡비(예: 100%)로 설정하고 콘텐츠를 정사각형 컨테이너 내에 절대적으로 배치합니다.

.square {
  position: relative;
  ...
  flex-grow: 0;
}

.square::before {
  content: '';
  display: block;
  height: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

여백 간격:

두 접근 방식 모두 사각형 요소에 여백이나 패딩을 적용하여

참고: 가로세로 비율을 유지하려면 콘텐츠가 정사각형 안에 절대적으로 배치되어 있는지 확인하세요.

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