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는 복잡한 레이아웃 요구사항에 적합한 선택지