[CSS ] 12. Grid 레이아웃 예제 모음

[CSS ] 12. Grid 레이아웃 예제 모음

---

이 글은 Grid 레이아웃을 예제로 정리한 글이다. 예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.

---

예제 목록

1. 기본 3열 Grid
2. 고정 + 유동 (200px + 1fr)
3. gap 예제
4. grid-column / grid-row
5. grid-template-areas

---

예제 실행 화면

---

정리

• Grid는 행과 열 기반으로 화면을 구성한다.
• grid-template-columns/rows로 격자 구조를 만든다.
• gap은 아이템 사이 간격을 조절한다.
• grid-column, grid-row로 특정 아이템의 범위를 지정한다.
• grid-template-areas로 영역 단위 배치를 만들 수 있다.