CSS를 사용하여 반응형 사각형 그리드를 만드는 방법은 무엇입니까?

반응형 사각형 그리드 생성

소개:
반응형 사각형이 포함된 레이아웃을 생성하는 것은 종종 어려운 작업일 수 있습니다. 그러나 CSS 기술을 사용하면 이 효과를 얻을 수 있습니다.

반응형 사각형 레이아웃:
제공된 예는 콘텐츠가 수직 및 수평으로 정렬된 사각형 그리드를 보여줍니다. 이 레이아웃을 구현하기 위해 "grid" 및 "aspect-ratio" 속성을 활용하겠습니다.

CSS 구현:
아래 CSS 코드는 그리드를 설정하고 화면비를 설정합니다. 정사각형 모양을 유지하기 위한 각 정사각형의 비율:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1 / 1;
}

내용 정렬:
각 사각형 내의 콘텐츠를 정렬하기 위해 "flex" 속성과 "align-items" 속성을 사용합니다.

.square {
  display: flex;
  align-items: center;
}

유연한 콘텐츠 처리:
정사각형에는 텍스트, 이미지, 목록 등 다양한 콘텐츠 유형을 수용할 수 있습니다. 콘텐츠가 중앙에 유지되도록 적절한 패딩을 적용하고 이미지가 사각형 안에 포함되도록 합니다.

.square {
  padding: 5%;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

전체 너비 이미지:
전체 너비를 표시하는 사각형의 경우 너비 이미지의 경우 패딩을 제거하고 사각형을 덮도록 개체 맞춤 속성을 조정합니다. 완전히:

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

동적 크기 조정:
"grid-template-columns" 속성을 "repeat(3, 1fr)"으로 정의하면 사각형의 너비가 동적으로 조정됩니다. 사용 가능한 공간을 기반으로 다양한 화면 크기에 반응하는 레이아웃을 유지합니다.

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