유연한 레이아웃 마스터하기: 반응형 디자인을 위한 CSS Flexbox VS Grid

이 게시물에서는 CSS Flexbox 및 Grid를 사용하여 수평으로 분산된 반응형 카드 목록을 만드는 다양한 방법을 살펴봅니다. 다양한 화면 크기에 걸쳐 일관된 카드 크기와 간격을 유지하는 문제를 해결하겠습니다.

목차

• 목차
• 도전
• CSS Flexbox: 유연한 카드 목록
• flex-grow 및 flex-basis
을 통한 균등한 카드 배포
• CSS 그리드: 반응형 솔루션
• 요약

도전

갤러리 또는 목록 구성 요소에는 컨테이너 너비에 맞게 조정하기 위해 카드(기사, 제품, 이미지)가 필요한 경우가 많습니다. 각 카드의 크기는 동일한 높이, 너비 및 간격을 유지하면서 비례적으로 조정되어야 합니다. 레이아웃은 다양한 화면 크기에 걸쳐 원활하게 리플로우되어야 합니다.

기본 HTML 구조와 최소한의 CSS로 인해 처음에는 카드 분포가 고르지 않게 나타날 수 있습니다.

CSS Flexbox: 유연한 카드 목록

Flexbox는 간단한 접근 방식을 제공합니다. flex-wrap: wrap은 새 행으로 줄 바꿈을 활성화하고 gap는 간격을 제어합니다.

.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

수평 흐름이 생성됩니다.

그러나 .item(width: 100px;)에 고정 너비를 설정하면 카드가 사용 가능한 공간을 채우기 위해 확장되지 않아 공백이 남게 됩니다.

justify-content 속성(예: space-between, space-around 등)을 사용해도 균등 분포 문제가 완벽하게 해결되지는 않습니다.

flex-grow 및 flex-basis

을 통한 균등한 카드 배포

flex-basis은 초기 카드 크기를 설정하고 flex-grow: 1(또는 flex: 1)은 비례적인 증가를 허용합니다.

.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}

이렇게 하면 배포가 향상되지만 마지막 카드가 여전히 고르지 않게 확장될 수 있습니다.

CSS 그리드: 반응형 솔루션

CSS Grid는 더욱 강력한 솔루션을 제공합니다. display: grid 및 gap은 Flexbox와 유사하게 사용됩니다.

.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

응답성을 위해서는 grid-template-columns, auto-fit, minmax()을 포함하는 repeat()이 핵심입니다.

.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}

이렇게 하면 완전히 반응하는 레이아웃이 생성됩니다.

요약

Flexbox와 Grid는 모두 강력한 레이아웃 기능을 제공합니다. Flexbox는 1차원 레이아웃에 탁월한 반면 Grid는 2차원 제어에 탁월합니다. 올바른 도구를 선택하는 것은 특정 설계 요구 사항에 따라 다릅니다.

즐거운 코딩하세요! ?

? 새 책 Learning Vue를 통해 Vue 3와 TypeScript에 대해 알아보세요!

? X에서 나와 연결 | 링크드인

이 게시물에 좋아요를 누르셨나요? 공유하세요! ?? ?

위 내용은 유연한 레이아웃 마스터하기: 반응형 디자인을 위한 CSS Flexbox VS Grid의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!