주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
Check
in English

CSS 그리드

예제와 코드 조각을 사용하여 CSS 그리드에 구축된 대체 레이아웃 시스템을 활성화, 사용 및 사용자 지정하는 방법을 알아보세요.

이 페이지에서

부트스트랩의 기본 그리드 시스템은 수백만 명의 사람들이 시도하고 테스트한 10년 이상의 CSS 레이아웃 기술의 정점을 나타냅니다. 그러나 그것은 또한 우리가 새로운 CSS 그리드와 같은 브라우저에서 볼 수 있는 많은 현대 CSS 기능과 기술 없이 만들어졌습니다.

주의하십시오. CSS 그리드 시스템은 v5.1.0부터 실험적이며 옵트인 상태입니다! 이를 설명하기 위해 문서의 CSS에 포함했지만 기본적으로 비활성화되어 있습니다. 프로젝트에서 활성화하는 방법을 배우려면 계속 읽으십시오.

작동 방식

Bootstrap 5에서는 CSS Grid를 기반으로 하지만 Bootstrap 트위스트가 있는 별도의 그리드 시스템을 활성화하는 옵션을 추가했습니다. 반응형 레이아웃을 구축하기 위해 변덕스럽게 적용할 수 있는 클래스를 여전히 얻을 수 있지만 내부적으로는 다른 접근 방식을 사용합니다.

  • CSS 그리드는 옵트인입니다. 를 설정하여 기본 그리드 시스템을 비활성화하고 $enable-grid-classes: false설정하여 CSS 그리드를 활성화합니다 $enable-cssgrid: true. 그런 다음 Sass를 다시 컴파일하십시오.

  • .row의 인스턴스를 로 바꿉니다 .grid. .grid클래스는 HTML을 기반으로 하는 설정 을 설정 display: grid하고 생성합니다 .grid-template

  • .col-*클래스를 클래스로 교체 .g-col-*합니다. 이는 CSS 그리드 열이 grid-column대신 속성을 사용하기 때문입니다 width.

  • 열과 여백 크기는 CSS 변수를 통해 설정됩니다. 부모에서 설정하고 및 .grid를 사용하여 인라인 또는 스타일시트에서 원하는 대로 사용자 정의합니다 .--bs-columns--bs-gap

앞으로 Bootstrap은 gapflexbox에 대한 거의 완전한 브라우저 지원을 달성했기 때문에 하이브리드 솔루션으로 전환할 가능성이 높습니다.

주요 차이점

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

  • Flex 유틸리티는 같은 방식으로 CSS 그리드 열에 영향을 주지 않습니다.

  • 간격은 거터를 대체합니다. 이 속성은 기본 그리드 시스템 gap의 수평을 대체하며 .paddingmargin

  • 따라서 s와 달리 .rows .grid에는 음수 여백이 없으며 여백 유틸리티를 사용하여 그리드 거터를 변경할 수 없습니다. 그리드 간격은 기본적으로 가로 및 세로로 적용됩니다. 자세한 내용은 사용자 정의 섹션 을 참조하십시오.

  • style="--bs-columns: 3;"인라인 및 사용자 정의 스타일은 수정자 클래스(예: vs ) 를 대체하는 것으로 간주되어야 합니다 class="row-cols-3".

  • 중첩은 유사하게 작동하지만 중첩된 각 인스턴스에서 열 수를 재설정해야 할 수 있습니다 .grid. 자세한 내용은 중첩 섹션 을 참조하십시오.

예

3열

.g-col-4클래스 를 사용하여 모든 뷰포트 및 장치에 동일한 너비의 열 3개를 만들 수 있습니다 . 반응형 클래스 를 추가 하여 뷰포트 크기별로 레이아웃을 변경합니다.

.g-col-4
.g-col-4
.g-col-4
HTML 
<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>

반응형

반응형 클래스를 사용하여 뷰포트에서 레이아웃을 조정합니다. 여기에서 가장 좁은 뷰포트에서 2개의 열로 시작한 다음 중간 뷰포트 이상에서 3개의 열로 확장합니다.

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
HTML 
<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>

모든 뷰포트에서 이 두 열 레이아웃과 비교하십시오.

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

쌈

가로로 더 이상 공간이 없으면 그리드 항목이 자동으로 다음 줄로 줄 바꿈됩니다. gap그리드 항목 사이의 가로 및 세로 간격에 적용됩니다 .

.g-col-6
.g-col-6
.g-col-6
.g-col-6
HTML 
<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>

시작

시작 클래스는 기본 그리드의 오프셋 클래스를 대체하는 것을 목표로 하지만 완전히 동일하지는 않습니다. CSS Grid는 브라우저에 "이 열에서 시작" 및 "이 열에서 끝"이라고 알려주는 스타일을 통해 그리드 템플릿을 만듭니다. 해당 속성은 grid-column-start및 grid-column-end입니다. 시작 클래스는 전자의 줄임말입니다. 필요에 따라 열의 크기를 조정하고 정렬하기 위해 열 클래스와 쌍을 이룹니다. 시작 클래스 는 이 속성에 대해 잘못된 값 1으로 시작됩니다.0

.g-col-3 .g-start-2
.g-col-4 .g-start-6
HTML 
<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>

자동 열

그리드 항목( a 의 직계 자식)에 클래스가 없는 .grid경우 각 그리드 항목은 자동으로 하나의 열로 크기가 조정됩니다.

1
1
1
1
1
1
1
1
1
1
1
1
HTML 
<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>

이 동작은 그리드 열 클래스와 혼합될 수 있습니다.

.g-col-6
1
1
1
1
1
1
HTML 
<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>

중첩

기본 그리드 시스템과 유사하게 CSS 그리드를 사용하면 .grids를 쉽게 중첩할 수 있습니다. 그러나 기본값과 달리 이 그리드는 행, 열 및 간격의 변경 사항을 상속합니다. 아래 예를 고려하십시오.

  • 로컬 CSS 변수로 기본 열 수를 재정의합니다 --bs-columns: 3.
  • 첫 번째 자동 열에서 열 개수는 상속되고 각 열은 사용 가능한 너비의 1/3입니다.
  • 두 번째 자동 열에서 중첩된 열 수 .grid를 12(기본값)로 재설정했습니다.
  • 세 번째 자동 열에는 중첩된 콘텐츠가 없습니다.

실제로 이것은 기본 그리드 시스템과 비교할 때 더 복잡하고 사용자 정의 레이아웃을 허용합니다.

첫 번째 자동 열
자동 열
자동 열
두 번째 자동 열
6/12
12개 중 4개
12개 중 2개
세 번째 자동 열
HTML 
<div class="grid text-center" 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>

커스터마이징

로컬 CSS 변수를 사용하여 열 수, 행 수 및 간격 너비를 사용자 정의합니다.

변하기 쉬운 대체 값 설명
--bs-rows 1 그리드 템플릿의 행 수
--bs-columns 12 그리드 템플릿의 열 수
--bs-gap 1.5rem 열 사이의 간격 크기(세로 및 가로)

이러한 CSS 변수에는 기본값이 없습니다. 대신 로컬 인스턴스가 제공 될 때까지 사용되는 대체 값을 적용합니다 . 예를 들어, 아직 설정되지 않았기 때문에 var(--bs-rows, 1)무시하는 CSS 그리드 행에 사용합니다. --bs-rows그렇게 되면 .grid인스턴스는 의 대체 값 대신 해당 값을 사용합니다 1.

그리드 클래스 없음

의 직계 자식 요소 .grid는 그리드 항목이므로 .g-col클래스를 명시적으로 추가하지 않고도 크기가 조정됩니다.

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

기둥과 간격

열 수와 간격을 조정합니다.

.g-col-2
.g-col-2
HTML 
<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>
.g-col-6
.g-col-4
HTML 
<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>

행 추가

행 추가 및 열 배치 변경:

자동 열
자동 열
자동 열
HTML 
<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>

갭

를 수정하여 수직 간격만 변경합니다 row-gap. gapon .grids를 사용 하지만 필요 row-gap에 column-gap따라 수정할 수 있습니다.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
HTML 
<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그 때문에 단일 값(모든 면) 또는 한 쌍의 값(수직 및 수평)을 취할 수 있는 서로 다른 수직 및 수평 s를 가질 수 있습니다. 이것은 인라인 스타일 gap또는 --bs-gapCSS 변수와 함께 적용할 수 있습니다.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
HTML 
<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>

사스

CSS 그리드의 한 가지 제한 사항은 기본 클래스가 여전히 두 개의 Sass 변수 $grid-columns및 $grid-gutter-width. 이것은 컴파일된 CSS에서 생성된 클래스의 수를 효과적으로 미리 결정합니다. 여기에는 두 가지 옵션이 있습니다.

  • 이러한 기본 Sass 변수를 수정하고 CSS를 다시 컴파일하십시오.
  • 인라인 또는 사용자 정의 스타일을 사용하여 제공된 클래스를 보강하십시오.

예를 들어 열 수를 늘리고 간격 크기를 변경한 다음 인라인 스타일과 미리 정의된 CSS 그리드 열 클래스(예: .g-col-4)를 혼합하여 "열"의 크기를 조정할 수 있습니다.

14열
.g-col-4
HTML 
<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>