CSS Grid

CSS Grid 기반으로 구축된 대체 레이아웃 시스템을 예시와 코드 스니펫과 함께 활성화하고, 사용하고, 커스터마이즈하는 방법을 배워요.

출처: 문서

본문

Bootstrap의 기본 그리드 시스템은 수십 년간의 CSS 레이아웃 기법이 집약된 결과이며, 수백만 명이 사용하며 검증됐어요. 하지만 새로운 CSS Grid 같은 브라우저의 현대적인 CSS 기능과 기법을 반영하지 않고 만들어졌어요.

Heads up—우리 CSS Grid 시스템은 v5.1.0 기준으로 실험적이며 옵트인(opt-in)이에요! 문서의 CSS에 포함해서 보여 드리지만 기본적으로는 비활성화돼 있어요. 계속 읽어서 자신의 프로젝트에서 활성화하는 방법을 배워 보세요.

동작 원리 (How it works)

Bootstrap 5에서 CSS Grid 기반의 별도 그리드 시스템을 활성화할 수 있는 옵션을 추가했어요. 다만 Bootstrap만의 방식을 적용했죠. 반응형 레이아웃을 만들기 위해 마음대로 적용할 수 있는 클래스는 그대로 얻되, 내부적으로는 다른 접근 방식을 사용해요.

CSS Grid는 옵트인(opt-in)이에요. $enable-grid-classes: false로 설정해 기본 그리드 시스템을 비활성화하고, $enable-cssgrid: true로 설정해 CSS Grid를 활성화해요. 그런 다음 Sass를 다시 컴파일하세요.
.row를 .grid로 바꿔 사용해요. .grid 클래스는 display: grid를 설정하고, HTML로 구축할 수 있는 grid-template을 만들어요.
.col-* 클래스를 .g-col-* 클래스로 바꿔 사용해요. CSS Grid 컬럼이 width 대신 grid-column 속성을 사용하기 때문이에요.
컬럼과 거터 크기는 CSS 변수로 설정해요. 부모 .grid에서 설정하고, --bs-columns와 --bs-gap으로 인라인 또는 스타일시트에서 원하는 대로 커스터마이즈해요.

앞으로 gap 속성이 flexbox에서 거의 모든 브라우저 지원을 얻었으므로, Bootstrap은 하이브리드 방식으로 전환할 가능성이 커요.

핵심 차이점 (Key differences)

기본 그리드 시스템과 비교하면:

Flex 유틸리티는 CSS Grid 컬럼에 같은 방식으로 영향을 주지 않아요.
거터(gutters)가 gap으로 대체돼요. gap 속성은 기본 그리드 시스템의 가로 패딩을 대체하고, margin에 더 가깝게 동작해요.
결과적으로 .row와 달리 .grid에는 음수 마진이 없고, 마진 유틸리티를 사용해 그리드 거터를 바꿀 수 없어요. 그리드 gap은 기본적으로 가로와 세로 양쪽에 적용돼요. 자세한 내용은 customizing 섹션을 참조하세요.
인라인 및 커스텀 스타일은 수정자 클래스의 대체물로 봐야 해요(예: style="--bs-columns: 3;" 대 class="row-cols-3").
중첩(nesting)도 비슷하게 동작하지만, 중첩된 .grid 인스턴스마다 컬럼 수를 리셋해야 할 수 있어요. 자세한 내용은 nesting 섹션을 참조하세요.

예시 (Examples)

세 컬럼 (Three columns)

모든 뷰포트와 디바이스에서 동일한 너비의 세 컬럼은 .g-col-4 클래스를 사용해 만들 수 있어요. 뷰포트 크기별로 레이아웃을 바꾸려면 반응형 클래스를 추가하세요.

<div class="grid text-center">
 <div class="g-col-4">
  .g-col-4
 </div>
 <div class="g-col-4">
  .g-col-4
 </div>
 <div class="g-col-4">
  .g-col-4
 </div>
</div>

반응형 (Responsive)

반응형 클래스로 뷰포트에 따라 레이아웃을 조정할 수 있어요. 여기서는 가장 좁은 뷰포트에서 두 컬럼으로 시작하고, 중간 뷰포트 이상에서는 세 컬럼으로 늘어나요.

<div class="grid text-center">
 <div class="g-col-6 g-col-md-4">
  .g-col-6 .g-col-md-4
 </div>
 <div class="g-col-6 g-col-md-4">
  .g-col-6 .g-col-md-4
 </div>
 <div class="g-col-6 g-col-md-4">
  .g-col-6 .g-col-md-4
 </div>
</div>

모든 뷰포트에서 두 컬럼인 이 레이아웃과 비교해 보세요.

<div class="grid text-center">
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
</div>

줄 바꿈 (Wrapping)

가로로 공간이 더 없으면 그리드 아이템은 자동으로 다음 줄로 넘어가요. gap은 그리드 아이템 사이의 가로·세로 간격 모두에 적용된다는 점을 기억하세요.

<div class="grid text-center">
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
</div>

시작 위치 (Starts)

Start 클래스는 기본 그리드의 offset 클래스를 대체하려고 만들어졌지만, 완전히 같지는 않아요. CSS Grid는 브라우저에 "이 컬럼에서 시작해" "이 컬럼에서 끝나"라고 말하는 스타일을 통해 grid template을 만들어요. 그 속성은 grid-column-start와 grid-column-end예요. Start 클래스는 전자(grid-column-start)의 줄임 표현이에요. 컬럼 클래스와 함께 사용해서 컬럼의 크기와 정렬을 원하는 대로 조절하세요. 이 속성들에는 0이 유효하지 않은 값이므로 Start 클래스는 1부터 시작해요.

<div class="grid text-center">
 <div class="g-col-3 g-start-2">
  .g-col-3 .g-start-2
 </div>
 <div class="g-col-4 g-start-6">
  .g-col-4 .g-start-6
 </div>
</div>

자동 컬럼 (Auto columns)

그리드 아이템(.grid의 직계 자식)에 클래스가 없으면 각 그리드 아이템이 자동으로 한 컬럼 크기로 정해져요.

<div class="grid text-center">
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
</div>

이 동작은 그리드 컬럼 클래스와 섞어서 쓸 수 있어요.

<div class="grid text-center">
 <div class="g-col-6">
  .g-col-6
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
 <div>
  1
 </div>
</div>

중첩 (Nesting)

기본 그리드 시스템과 비슷하게 CSS Grid는 .grid의 중첩을 쉽게 지원해요. 다만 기본 그리드와 달리 이 그리드는 행, 컬럼, gap의 변경 사항을 상속받아요. 아래 예시를 살펴볼게요:

로컬 CSS 변수로 기본 컬럼 수를 오버라이드해요: --bs-columns: 3.
첫 번째 자동 컬럼에서는 컬럼 수가 상속되어 각 컬럼이 사용 가능한 너비의 1/3이에요.
두 번째 자동 컬럼에서는 중첩된 .grid의 컬럼 수를 12(기본값)로 리셋했어요.
세 번째 자동 컬럼에는 중첩된 콘텐츠가 없어요.

실제로 이 덕분에 기본 그리드 시스템보다 더 복잡하고 커스터마이즈된 레이아웃을 만들 수 있어요.

<div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
 <div>
  First auto-column
  <div class="grid">
   <div>
    Auto-column
   </div>
   <div>
    Auto-column
   </div>
  </div>
 </div>
 <div>
  Second auto-column
  <div class="grid" style="--bs-columns: 12;">
   <div class="g-col-6">
    6 of 12
   </div>
   <div class="g-col-4">
    4 of 12
   </div>
   <div class="g-col-2">
    2 of 12
   </div>
  </div>
 </div>
 <div>
  Third auto-column
 </div>
</div>

커스터마이즈 (Customizing)

로컬 CSS 변수로 컬럼 수, 행 수, gap 너비를 커스터마이즈할 수 있어요.

변수	폴백 값	설명
`--bs-rows`	1	grid template의 행 수
`--bs-columns`	12	grid template의 컬럼 수
`--bs-gap`	1.5rem	컬럼 사이 gap 크기(세로·가로)

이 CSS 변수들은 기본값이 없어요. 대신 로컬 인스턴스가 제공될 때까지 사용되는 폴백 값을 적용해요. 예를 들어 CSS Grid 행에는 var(--bs-rows, 1)을 사용하는데, 아직 어디에도 설정되지 않았으므로 --bs-rows를 무시해요. 일단 설정되면 .grid 인스턴스는 폴백 값인 1 대신 그 값을 사용해요.

그리드 클래스 없이 (No grid classes)

.grid의 직계 자식 요소는 그리드 아이템이므로 .g-col 클래스를 명시적으로 추가하지 않아도 크기가 정해져요.

<div class="grid text-center" style="--bs-columns: 3;">
 <div>
  Auto-column
 </div>
 <div>
  Auto-column
 </div>
 <div>
  Auto-column
 </div>
</div>

컬럼과 gap (Columns and gaps)

컬럼 수와 gap을 조정해요.

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
 <div class="g-col-2">
  .g-col-2
 </div>
 <div class="g-col-2">
  .g-col-2
 </div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-4">
  .g-col-4
 </div>
</div>

행 추가 (Adding rows)

행을 더 추가하고 컬럼의 위치를 바꿔요:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
 <div>
  Auto-column
 </div>
 <div class="g-start-2" style="grid-row: 2">
  Auto-column
 </div>
 <div class="g-start-3" style="grid-row: 3">
  Auto-column
 </div>
</div>

Gaps

row-gap을 수정해서 세로 gap만 바꿀 수 있어요. .grid에서는 gap을 사용하지만, 필요에 따라 row-gap과 column-gap을 수정할 수 있어요.

<div class="grid text-center" style="row-gap: 0;">
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
</div>

그래서 세로와 가로 gap을 다르게 가질 수 있어요. 단일 값(모든 면) 또는 값 쌍(세로·가로)을 받을 수 있어요. gap을 위한 인라인 스타일이나 --bs-gap CSS 변수로 적용할 수 있어요.

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
 <div class="g-col-6">
  .g-col-6
 </div>
</div>

Sass

CSS Grid의 한계 중 하나는 기본 클래스가 여전히 두 개의 Sass 변수 $grid-columns와 $grid-gutter-width로 생성된다는 점이에요. 이는 컴파일된 CSS에서 생성되는 클래스 수를 사실상 미리 결정해요. 여기에는 두 가지 옵션이 있어요:

그 기본 Sass 변수들을 수정하고 CSS를 다시 컴파일해요.
인라인 또는 커스텀 스타일을 사용해 제공된 클래스를 보강해요.

예를 들어 컬럼 수를 늘리고 gap 크기를 바꾼 다음, 인라인 스타일과 미리 정의된 CSS Grid 컬럼 클래스(예: .g-col-4)를 조합해 "컬럼"의 크기를 정할 수 있어요.

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
 <div style="grid-column: span 14;">
  14 columns
 </div>
 <div class="g-col-4">
  .g-col-4
 </div>
</div>

더 알아보기 (Learn more)

Bootstrap 문서