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

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

소개

반응형 정사각형이 있는 그리드 레이아웃을 만드는 것은 특히 유지 관리를 시도할 때 어려울 수 있습니다. 정사각형 사이의 높이와 간격이 동일합니다. CSS Grid와 Flexbox를 모두 이 목적으로 사용할 수 있지만, 이 기사에서는 CSS Grid와 "padding-bottom" 트릭을 사용하여 이를 달성하는 방법을 살펴보겠습니다.

높이를 너비와 동일하게 설정

CSS 그리드 사용

CSS 그리드를 사용하여 사각형의 높이를 너비와 동일하게 설정하려면 정사각형의 종횡비를 유지하는 의사 요소를 생성하는 "패딩 하단" 트릭입니다. 다음 CSS 규칙을 적용할 수 있습니다.

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

이렇게 하면 내용이 무엇이든 정사각형이 정사각형으로 유지됩니다.

Flexbox 사용

Flexbox로 동일한 효과를 얻으려면 비슷한 접근 방식을 사용할 수 있습니다. 사용됨:

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

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

Flexbox에서 콘텐츠 속성은 사각형의 콘텐츠를 그 안에 절대적으로 배치하는 데 사용됩니다.

사각형 사이에 여백 설정

"padding-bottom" 트릭을 사용하여 사각형 사이에 여백을 만들 수도 있습니다.

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

이렇게 하면 10px가 추가됩니다. 각 사각형 사이의 간격.

반응형 동작

레이아웃을 반응형으로 만들기 위해 미디어 쿼리를 사용하여 더 작은 화면 크기에 맞게 그리드 레이아웃을 단일 열로 변경할 수 있습니다.

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

이렇게 하면 사각형이 좁은 공간에 수직으로 쌓이게 됩니다.

결론

"패딩 하단" 트릭을 사용하면 CSS Grid와 Flexbox를 모두 사용하여 높이가 같은 정사각형과 사이에 여백이 있는 반응형 그리드 레이아웃을 만들 수 있습니다. 이 기술은 널리 사용되며 이러한 일반적인 레이아웃 요구 사항에 대한 안정적인 솔루션을 제공합니다.

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