sliver__

CSS Grid 개념 정리 본문

Frontend/CSS

CSS Grid 개념 정리

sliver__ 2025. 5. 3. 16:32
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
Comments