CSS 그리드

부트스트랩의 기본 그리드 시스템은 수백만 명의 사람들이 시도하고 테스트한 10년 이상의 CSS 레이아웃 기술의 정점을 나타냅니다. 그러나 그것은 또한 우리가 새로운 CSS 그리드와 같은 브라우저에서 볼 수 있는 많은 현대 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개를 만들 수 있습니다 . 반응형 클래스 를 추가 하여 뷰포트 크기별로 레이아웃을 변경합니다.

<div class="grid">
  <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개의 열로 확장합니다.

<div class="grid">
  <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">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

쌈

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

<div class="grid">
  <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

<div class="grid">
  <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경우 각 그리드 항목은 자동으로 하나의 열로 크기가 조정됩니다.

<div class="grid">
  <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">
  <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(기본값)로 재설정했습니다.
• 세 번째 자동 열에는 중첩된 콘텐츠가 없습니다.

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

<div class="grid" 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 변수를 사용하여 열 수, 행 수 및 간격 너비를 사용자 정의합니다.

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

그리드 클래스 없음

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

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

기둥과 간격

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

<div class="grid" 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" 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>

행 추가

행 추가 및 열 배치 변경:

<div class="grid" 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따라 수정할 수 있습니다.

<div class="grid" 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 변수로 적용할 수 있습니다.

<div class="grid" 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)를 혼합하여 "열"의 크기를 조정할 수 있습니다.

<div class="grid" 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>