[CSS] Grid 개념

1. CSS Grid란 무엇인가

CSS Grid는 2차원(행 + 열) 레이아웃을 다루기 위한 레이아웃 시스템입니다.

• Flex → 1차원(가로 또는 세로)
• Grid → 2차원(가로 + 세로)

화면 전체 구조, 카드 배치, 대시보드 UI에 최적

Grid의 핵심 특징

• 행(row)과 열(column)을 동시에 제어
• 요소의 위치를 좌표처럼 정확하게 배치
• 반응형 레이아웃에 매우 강력

 

2. Grid Container & Grid Item

.container {
  display: grid;
}

• display: grid → Grid Container
• 그 안의 직계 자식 → Grid Item

여기서부터 Grid 세계가 시작됩니다.

 

3. Grid Line (그리드 라인)

 

행과 열을 나누는 기준선

 

• 눈에 보이지 않지만
• 배치의 기준 좌표 역할을 함

 

 

 

4. Grid Cell (그리드 셀)

행과 열이 교차해서 만들어진 가장 작은 단위 공간

 

 

5. 정리하면

CSS Grid는 눈에 보이지 않는 Grid Line 위에
Grid Cell을 배치하는 구조이며,
우리는 이 좌표를 이용해 요소를 정확하게 배치한다.