일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- Javascript
- c
- c++
- CSS
- stl
- 포토샵
- pandas
- Codility
- 상태
- react
- 미디어 쿼리
- REM
- 백준
- Gap
- transform
- 알고리즘
- 반응형 웹
- 통신사할인
- 수학
- SK바이오사이언스
- 강화학습
- 소수
- skt membership
- grid
- float
- 확률
- Photoshop
- box-sizing
- spring
- JSX
Archives
- Today
- Total
sliver__
CSS Grid 개념 정리 본문
728x90
CSS Grid는 이차원(2D) 레이아웃을 위해 설계된 CSS 모듈로, 컨테이너를 행(row)과 열(column) 로 나누고 그 안에 아이템을 자유롭게 배치할 수 있게 해 줍니다.
Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 복잡한 그리드 구조를 더 적은 코드로 구현할 수 있어 UI 설계의 혁신을 가져왔습니다.
핵심 용어
- Grid Container: display: grid 또는 inline-grid를 선언한 부모 요소
- Grid Items: 컨테이너의 직속 자식 요소들
- Grid Lines: 행과 열을 나누는 가상의 선, 1부터 열 개수+1, 행 개수+1까지 번호 매김
- Grid Cells: 교차하는 그리드 라인 사이의 사각 영역(셀)
- Grid Tracks: 하나의 행(row track) 또는 열(column track)
- Gap (Gutter): 셀 사이 간격(gap, column-gap, row-gap)
Grid 컨테이너 설정 방법
- Grid 활성화
.container {
display: grid;
}
- 열 정의: grid-template-columns
.container {
grid-template-columns: 250px 150px 100px 200px;
/* 4개의 열 생성 */
}
- 행 정의 (선택) : grid-template-rows
.container {
grid-template-rows: 300px 200px;
/* 2개의 행 생성 */
}
- 자동 배치
- 아이템 개수에 맞춰 암시적(implicit) 행이 자동 생성되고,
- 새 아이템은 첫 번째 빈 셀부터 순서대로 채워집니다.
셀 채우기와 Stretch 동작
- 기본적으로 모든 그리드 아이템은 자신이 속한 셀 전체를 채우도록(stretch) 배치됩니다.
- 특정 아이템만 개별 정렬을 원한다면 justify-self, align-self를 사용해 오버라이드할 수 있습니다.
간격 주기: gap 사용
.container {
gap: 30px; /* 열·행 모두 30px 간격 */
column-gap: 30px; /* 열 간격만 별도 지정 */
row-gap: 60px; /* 행 간격만 별도 지정 */
}
- Margin 대신 항상 gap 계열 속성을 사용합니다.
- Flexbox와 동일한 방식으로, Grid에서도 gap 하나로 행·열 간격을 한 번에 관리할 수 있습니다.
활용 팁 & 다음 강의 예고
- display: none 으로 불필요한 컨테이너(예: container--off)를 쉽게 제거 가능
- Grid의 기본 다섯 가지 속성(display, grid-template-(columns|rows), gap)만으로도 복잡한 레이아웃을 구현할 수 있습니다.
- 다음 강의에서는 grid-template-areas, 라인 기반 배치(line-based placement) 등을 실습하며 더 고급 기능을 다룹니다.
CSS Grid의 강력함을 가까이서 체험해 보세요! 🚀
728x90
'Frontend > CSS' 카테고리의 다른 글
Grid 아이템 정렬 소개 (0) | 2025.05.03 |
---|---|
Grid 아이템 수동 배치하기 (0) | 2025.05.03 |
CSS Grid의 핵심 개념과 속성 (0) | 2025.05.03 |
Flex 아이템 크기 조절의 기본: flex 속성 (0) | 2025.05.03 |
Flexbox 실습: 정렬과 간격 다루기 (0) | 2025.05.03 |
Comments