반응형
안녕하세요, 토스트데브입니다!
지난 글에서 Flexbox로 수평 또는 수직 정렬을 다뤘다면, 오늘은 한 차원 더 확장된 레이아웃 시스템인 CSS Grid Layout에 대해 배워보겠습니다.
Grid는 2차원(행과 열)의 격자 구조를 기반으로 정교한 레이아웃을 설계할 수 있어, 대시보드, 갤러리, 블로그 카드 등 다양한 UI에 유용하게 활용됩니다.
1️⃣ CSS Grid란?
CSS Grid Layout은 요소를 행(row)과 열(column) 기준으로 배치하는 2차원 레이아웃 시스템입니다.
- display: grid를 부모 요소에 지정하면, 해당 요소는 Grid 컨테이너
- 자식 요소들은 Grid 아이템이 됩니다.
2️⃣ 기본 구조
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}👉 위 코드는 너비가 100px인 3개의 열로 구성된 Grid를 생성합니다.
3️⃣ 주요 속성 정리
✅ display: grid
Grid 레이아웃을 활성화합니다.
✅ grid-template-columns – 열 정의
grid-template-columns: 1fr 1fr 1fr;- 3개의 열 생성, 각 열은 전체 너비의 1/3씩 차지
- fr은 fraction 단위로, 남은 공간을 비율로 나눕니다.
다른 예:
grid-template-columns: 200px auto 1fr;
✅ grid-template-rows – 행 정의
grid-template-rows: 100px 200px;- 첫 번째 행: 100px
- 두 번째 행: 200px
✅ gap 또는 row-gap, column-gap
grid-gap: 20px;- 행과 열 사이에 공백 추가
row-gap: 10px;
column-gap: 30px;
✅ grid-column, grid-row – 아이템 위치 지정
.item1 {
grid-column: 1 / 3; /* 1열부터 2열까지 차지 */
}.item2 {
grid-row: 2 / 4; /* 2행부터 3행까지 차지 */
}
✅ grid-template-areas – 이름 기반 레이아웃
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }💡 HTML 구조와 시각적 레이아웃을 분리하여 가독성과 유지보수성이 향상됩니다.
✅ justify-items / align-items – 아이템 정렬
- justify-items: 열 기준 정렬 (가로)
- align-items: 행 기준 정렬 (세로)
.grid-container {
justify-items: center;
align-items: center;
}
✅ justify-content / align-content – 전체 그리드 정렬
- justify-content: 가로 방향으로 전체 Grid 위치 조정
- align-content: 세로 방향으로 전체 Grid 위치 조정
4️⃣ 반응형을 위한 auto-fit & minmax
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- 열의 수를 자동 조정하며, 최소 200px, 최대 남은 공간 사용
- 반응형 카드 레이아웃, 갤러리 등에 필수
5️⃣ 예제: 간단한 카드 레이아웃
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
👉 이렇게 하면 화면 크기에 따라 유동적으로 카드가 줄바꿈되며 정렬됩니다.
✅ 정리하며…
CSS Grid는 Flexbox보다 구조적이고, 복잡한 UI 레이아웃도 더 간단하고 직관적으로 설계할 수 있습니다.
특히, 정렬 + 위치 지정 + 반응형 설계가 쉬워서 대형 프로젝트에 적합합니다.
Flexbox vs Grid 요약
- Flexbox: 한 줄 정렬에 최적 (1차원)
- Grid: 격자 기반의 전체 레이아웃에 최적 (2차원)
#CSSGrid #그리드레이아웃 #displayGrid #웹디자인기초 #프론트엔드기초 #반응형디자인 #CSS기초 #gridTemplate #2차원레이아웃 #웹개발입문
반응형