CSS Grid로 동적 레이아웃 생성하기
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

CSS Grid로 동적 레이아웃 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, CSS 레이아웃 설계자(중급 이상)

핵심 요약

  • CSS Grid 활용: grid-template-columns: repeat(2, 1fr)로 2열 레이아웃 생성
  • 특정 항목 확장: .span-both 클래스에 grid-column: 1 / -1 적용하여 2열을 모두 차지
  • 간결한 구조: gap 속성으로 항목 간 간격 조절, .grid-item 스타일로 시각적 구분

섹션별 세부 요약

1. 문제 정의 및 접근 방법

  • 2열 레이아웃 구현 필요
  • Flexbox 사용 실패 후 CSS Grid로 전환
  • 7, 8번 항목이 2열을 모두 차지하도록 조정

2. HTML 구조

  • .grid-container 컨테이너 생성
  • 8개의 .grid-item 요소 포함
  • 7, 8번 항목에 span-both 클래스 추가

3. CSS 구현

  • 컨테이너 스타일:

```css

.grid-container {

display: grid;

grid-template-columns: repeat(2, 1fr); / 2열 생성 /

gap: 10px; / 항목 간 간격 설정 /

}

```

  • 항목 스타일:

```css

.grid-item {

background-color: lightblue;

padding: 20px;

text-align: center;

}

```

  • 확장 항목 스타일:

```css

.span-both {

grid-column: 1 / -1; / 1열부터 마지막 열까지 확장 /

}

```

4. 동작 원리 설명

  • display: grid로 그리드 레이아웃 활성화
  • repeat(2, 1fr)으로 동적 2열 생성
  • grid-column: 1 / -1로 특정 항목이 전체 너비 확장

결론

  • grid-column: 1 / -1은 그리드 내 특정 항목을 전체 너비로 확장하는 효과적인 방법
  • gap 속성을 활용한 간격 설정과 .span-both 클래스의 조합으로 유연한 레이아웃 구현 가능
  • CSS Grid는 복잡한 레이아웃 요구사항에 적합한 선택지