Frontend/CSS

CSS Grid의 핵심 개념과 속성

sliver__ 2025. 5. 3. 16:23
728x90

 

CSS Grid는 이차원(2D) 레이아웃을 위한 최신 CSS 모듈로, 단 몇 줄의 코드만으로도 복잡한 구조를 쉽게 구현할 수 있습니다.

display: grid를 통해 그리드 컨테이너를 선언하고, grid-template-columns/grid-template-rows로 열과 행(track) 의 크기를 직접 설정합니다.

또한 gap 속성으로 열·행 간격(gutter)을 일괄 지정할 수 있으며, column-gap과 row-gap을 통해 축별로 서로 다른 간격도 정의할 수 있습니다.

1. Grid 컨테이너 선언하기

.container {
  display: grid;
}
  • grid 또는 inline-grid 값을 주면 해당 요소가 그리드 컨테이너가 되고,
    그 직속 자식들이 그리드 아이템이 됩니다.
  • 이 선언만으로는 시각적 변화가 없으며, 이후 열·행 정의가 필요합니다.

2. 열 정의: grid-template-columns

.container {
  grid-template-columns: 250px 150px;
}
  • grid-template-columns에 나열된 값만큼 열(track) 이 생성됩니다.
  • 예: 250px 150px → 첫 번째 열 250px, 두 번째 열 150px.
  • 브라우저 공간이 부족하면 자동으로 암시적(implicit) 행이 생성되어 추가 아이템을 배치합니다.

3. 행 정의: grid-template-rows

.container {
  grid-template-rows: 300px 200px;
}
  • grid-template-rows에 나열된 값만큼 행(track) 이 생성됩니다.
  • 각 행의 높이를 개별적으로 설정하여, 아이템이 지정된 셀(cell)을 벗어나지 않도록 합니다.

4. 반복 열·행과 자동 배치

  • 여러 개의 열을 지정하면, 필요한 만큼의 행이 자동으로 추가됩니다.
  • 새로운 아이템이 들어오면 가장 앞의 빈 셀에 배치되며, 남는 셀은 빈 채로 남을 수 있습니다.

5. 기본 Stretch 동작

  • 기본적으로 그리드 아이템은 자신이 속한 셀 전체를 채우도록(stretch) 배치됩니다.
  • 행 높이나 열 너비를 지정하지 않으면, 해당 셀 크기는 아이템 콘텐츠 크기에 맞춰 결정됩니다.

6. 간격(gap) 설정

.container {
  gap: 30px;            /* 열·행 모두 30px 간격 */
  column-gap: 30px;     /* 열 간격만 30px */
  row-gap: 60px;        /* 행 간격만 60px */
}
  • gap은 그리드 전용이 아닌, Flexbox 등에서도 사용할 수 있는 단축 속성입니다.
  • 열·행 구분이 필요할 땐 column-gap, row-gap을 사용합니다.

7. 요소 숨기기: display: none

  • 특정 컨테이너(예: 두 번째 예제) 전체를 제거하려면,로 설정하면 DOM에서 시각적으로 완전히 사라집니다.
.container--off { display: none; }

 

위 다섯 가지 속성만으로도 4×2 그리드 같은 복잡해 보이는 레이아웃을 손쉽게 구현할 수 있습니다.
다음에 grid-template-areas, grid-auto-flow 등 고급 기능과 라인 기반 배치(line-based placement) 를 실습하며 CSS Grid의 활용 범위를 확장해 보겠습니다.

 

즐거운 코딩 되세요! 🚀

728x90