그리드 시스템

강력한 모바일 우선 플렉스박스 그리드를 사용하여 12개의 열 시스템, 5개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 구축할 수 있습니다.

작동 방식

Bootstrap의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사용하여 콘텐츠를 레이아웃하고 정렬합니다. flexbox 로 제작되었으며 완벽하게 반응합니다. 다음은 그리드가 어떻게 결합되는지에 대한 예이며 심층적인 설명입니다.

flexbox를 처음 사용하거나 익숙하지 않습니까? 배경, 용어, 지침 및 코드 조각에 대한 이 CSS Tricks flexbox 가이드를 읽으십시오 .

세 개의 열 중 하나

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

위의 예에서는 사전 정의된 그리드 클래스를 사용하여 소형, 중형, 대형 및 초대형 장치에 동일한 너비의 열 3개를 생성합니다. 이러한 열은 부모가 있는 페이지의 중앙에 .container있습니다.

분해하면 작동 방식은 다음과 같습니다.

컨테이너는 사이트 콘텐츠를 중앙에 놓고 수평으로 채우는 수단을 제공합니다. .container반응형 픽셀 너비 또는 모든 표시 영역 및 장치 크기에 사용 .container-fluid합니다 .width: 100%
행은 열의 래퍼입니다. 각 열에는 padding그 사이의 공간을 제어하기 위한 수평(거터라고 함)이 있습니다. 그런 padding다음 음수 여백이 있는 행에 대해 상쇄됩니다. 이렇게 하면 열의 모든 콘텐츠가 시각적으로 왼쪽 아래에 정렬됩니다.
그리드 레이아웃에서 콘텐츠는 열 내에 배치되어야 하며 열만 행의 직계 자식일 수 있습니다.
flexbox 덕분에 지정되지 않은 그리드 열 width은 자동으로 동일한 너비의 열로 레이아웃됩니다. 예를 들어 will 의 4개 인스턴스 .col-sm는 각각 자동으로 작은 중단점에서 25% 이상 너비가 됩니다. 더 많은 예를 보려면 자동 레이아웃 열 섹션을 참조하세요 .
열 클래스는 행당 가능한 12개 중에서 사용하려는 열의 수를 나타냅니다. 따라서 3개의 동일한 너비 열이 필요하면 사용할 수 있습니다 .col-4.
열 width은 백분율로 설정되므로 항상 유동적이며 상위 요소를 기준으로 크기가 조정됩니다.
padding열에는 개별 열 사이의 거터를 만들기 위해 가로 가 있지만 에 있는 margin행과 padding열 에서 제거할 수 있습니다 ..no-gutters.row
그리드를 반응형으로 만들기 위해 각 반응형 중단점 마다 하나씩 5개의 그리드 중단점이 있습니다 . 모든 중단점(초소형), 소형, 중형, 대형 및 초대형입니다.
그리드 중단점은 최소 너비 미디어 쿼리를 기반으로 합니다. 즉, 하나의 중단점과 그 위에 있는 모든 중단점 에 적용됩니다(예: .col-sm-4소형, 중형, 대형 및 초대형 장치에 적용되지만 첫 번째 xs중단점에는 적용되지 않음).
보다 의미 있는 마크업을 위해 미리 정의된 그리드 클래스(예: .col-4) 또는 Sass 믹스 인을 사용할 수 있습니다.

일부 HTML 요소를 플렉스 컨테이너로 사용할 수 없는 것과 같은 flexbox 와 관련된 제한 사항과 버그에 유의하십시오 .

그리드 옵션

Bootstrap은 대부분의 크기를 정의하는 데 ems 또는 s를 사용하지만 s는 그리드 중단점 및 컨테이너 너비에 사용됩니다. 이는 뷰포트 너비가 픽셀 단위이고 글꼴 크기 에 따라 변경되지 않기 때문 입니다.rempx

편리한 표를 사용하여 부트스트랩 그리드 시스템의 여러 측면이 여러 장치에서 어떻게 작동하는지 확인하십시오.

	초소형 <576px	작은 ≥576px	중간 ≥768px	큰 ≥992px	초대형 ≥1200px
최대 컨테이너 너비	없음(자동)	540픽셀	720픽셀	960픽셀	1140픽셀
클래스 접두사	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
열 수	12
거터 폭	30px(열의 양쪽에 15px)
중첩 가능	예
열 순서	예

자동 레이아웃 열

와 같이 명시적으로 번호가 매겨진 클래스 없이 쉽게 열 크기를 조정하기 위해 중단점별 열 클래스를 활용합니다 .col-sm-6.

동일한 너비

예를 들어, 다음은 모든 장치와 뷰포트에 적용되는 두 가지 그리드 레이아웃 xs입니다 xl. 필요한 각 중단점에 대해 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일합니다.

1/2

2/2

1/3

2/3

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

동일한 너비의 열은 여러 줄로 나눌 수 있지만 명시적 flex-basis또는 border. 이전 브라우저 버전에 대한 해결 방법이 있지만 최신 버전인 경우에는 필요하지 않습니다.

열

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

하나의 열 너비 설정

flexbox 그리드 열에 대한 자동 레이아웃은 또한 한 열의 너비를 설정하고 형제 열이 주위에서 자동으로 크기를 조정하도록 할 수 있음을 의미합니다. 미리 정의된 그리드 ��래스(아래 표시된 대로), 그리드 믹스인 또는 인라인 너비를 사용할 수 있습니다. 다른 열은 중앙 열의 너비에 관계없이 크기가 조정됩니다.

1/3

3/2(넓음)

3/3

1/3

3/2(넓음)

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

가변 너비 콘텐츠

클래스를 사용 col-{breakpoint}-auto하여 콘텐츠의 자연스러운 너비에 따라 열의 크기를 조정합니다.

1/3

가변 너비 콘텐츠

3/3

1/3

가변 너비 콘텐츠

3/3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

동일한 너비의 다중 행

.w-100열을 나누려는 위치를 새 줄로 삽입하여 여러 행에 걸쳐 있는 동일한 너비의 열을 만듭니다 . 반응형 디스플레이 유틸리티.w-100 와 혼합하여 휴식 시간을 반응형으로 만드십시오 .

안부

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

반응형 수업

Bootstrap의 그리드에는 복잡한 반응형 레이아웃을 구축하기 위한 5개 계층의 사전 정의된 클래스가 포함되어 있습니다. 초소형, 소형, 중형, 대형 또는 초대형 장치에서 열의 크기를 원하는 대로 사용자 정의하십시오.

모든 중단점

가장 작은 장치에서 가장 큰 장치까지 동일한 그리드의 경우 .col및 .col-*클래스를 사용합니다. 특정 크기의 열이 필요한 경우 번호가 지정된 클래스를 지정하십시오. 그렇지 않으면 에 충실하십시오 .col.

안부

열-8

4열

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

수평으로 쌓임

단일 .col-sm-*클래스 세트를 사용하여 작은 중단점( )에서 수평이 되기 전에 스택으로 시작하는 기본 그리드 시스템을 만들 수 있습니다 sm.

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

믹스 앤 매치

열이 일부 그리드 계층에 쌓이는 것을 원하지 않습니까? 필요에 따라 각 계층에 대해 서로 다른 클래스를 조합하여 사용합니다. 모든 작동 방식에 대한 더 나은 아이디어는 아래 예를 참조하십시오.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

조정

flexbox 정렬 유틸리티를 사용하여 세로 및 가로로 열을 정렬합니다.

수직 정렬

세 개의 열 중 하나

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

세 개의 열 중 하나

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

수평 정렬

두 열 중 하나

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

거터 없음

사전 정의된 그리드 클래스에서 열 사이의 거터는 를 사용하여 제거할 수 있습니다 .no-gutters. 이것은 모든 직계 자식 열에서 margin음수 및 .row가로 를 제거합니다.padding

다음은 이러한 스타일을 만들기 위한 소스 코드입니다. 열 재정의는 첫 번째 자식 열로만 범위가 지정되고 속성 선택기 를 통해 대상이 지정됩니다 . 이렇게 하면 보다 구체적인 선택기가 생성되지만 간격 유틸리티 를 사용하여 열 패딩을 추가로 사용자 지정할 수 있습니다 .

엣지 투 엣지 디자인이 필요하십니까? 부모를 삭제 .container하거나 .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

실제로는 다음과 같습니다. 미리 정의된 다른 모든 그리드 클래스(열 너비, 반응 계층, 재정렬 등 포함)와 함께 계속 사용할 수 있습니다.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

열 줄 바꿈

단일 행에 12개 이상의 열이 있는 경우 추가 열의 각 그룹은 하나의 단위로 새 줄로 줄바꿈됩니다.

.col-9

.col-4
9 + 4 = 13 > 12이므로 이 4열 너비 div는 하나의 연속 단위로 새 줄에 래핑됩니다.

.col-6
후속 열은 새 줄을 따라 계속됩니다.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

열 나누기

flexbox에서 열을 새 줄로 나누려면 약간의 해킹이 필요합니다. 열을 새 줄로 묶고 width: 100%싶은 곳에 요소를 추가하세요. 일반적으로 이것은 여러 .rows로 수행되지만 모든 구현 방법이 이를 설명할 수 있는 것은 아닙니다.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

반응형 디스플레이 유틸리티 를 사용하여 특정 중단점에 이 중단을 적용할 수도 있습니다 .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

재정렬

주문 클래스

콘텐츠의 시각적 순서.order- 를 제어하기 위해 클래스를 사용 합니다. 이러한 클래스는 반응하므로 중단점(예: )으로 설정할 수 있습니다. 5개 그리드 계층 모두 에 대한 지원이 포함됩니다 .order.order-1.order-md-2112

먼저, 그러나 순서가 지정되지 않은

두 번째지만 마지막

세 번째, 하지만 첫 번째

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

와 ( )를 각각 적용하여 요소 를 변경하는 반응형 .order-first및 .order-last클래스 도 있습니다. 이러한 클래스는 필요에 따라 번호가 매겨진 클래스와 혼합될 수도 있습니다 .orderorder: -1order: 13order: $columns + 1.order-*

처음이지만 마지막

두 번째이지만 순서가 지정되지 않음

세 번째, 하지만 첫 번째

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

열 오프셋

.offset-반응형 그리드 클래스와 여백 유틸리티 의 두 가지 방법으로 그리드 열을 오프셋할 수 있습니다 . 그리드 클래스는 열과 일치하도록 크기가 조정되는 반면 여백은 오프셋 너비가 가변적인 빠른 레이아웃에 더 유용합니다.

오프셋 클래스

.offset-md-*클래스 를 사용하여 열을 오른쪽으로 이동합니다 . 이러한 클래스는 열만큼 열의 왼쪽 여백을 늘 *립니다. 예를 들어, 4개의 열 위로 .offset-md-4이동 합니다..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

응답 중단점에서 열 지우기 외에도 오프셋을 재설정해야 할 수 있습니다. 그리드 예제 에서 실제로 이것을 참조하십시오 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

마진 유틸리티

v4에서 flexbox로 이동하면서 마진 유틸리티를 사용 .mr-auto하여 형제 열을 서로 멀리 떨어뜨릴 수 있습니다.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

중첩

기본 그리드를 사용하여 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row집합을 추가합니다 . 중첩된 행에는 최대 12개 이하의 열을 추가하는 열 집합이 포함되어야 합니다(사용 가능한 열 12개를 모두 사용할 필요는 없음)..col-sm-*.col-sm-*

레벨 1: .col-sm-9

레벨 2: .col-8 .col-sm-6

레벨 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass 믹스인

Bootstrap의 소스 Sass 파일을 사용할 때 Sass 변수와 믹스인을 사용하여 사용자 정의, 의미 체계 및 반응형 페이지 레이아웃을 생성할 수 있는 옵션이 있습니다. 사전 정의된 그리드 클래스는 이러한 동일한 변수와 믹스인을 사용하여 빠른 반응형 레이아웃을 위해 즉시 사용할 수 있는 전체 클래스 제품군을 제공합니다.

변수

변수와 맵은 열 수, 여백 너비 및 부동 열을 시작할 미디어 쿼리 지점을 결정합니다. 우리는 이것을 사용하여 위에 설명된 미리 정의된 그리드 클래스와 아래 나열된 사용자 지정 믹스인을 생성합니다.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

믹신

믹스인은 그리드 변수와 함께 개별 그리드 열에 대한 의미론적 CSS를 생성하는 데 사용됩니다.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

사용 예

변수를 사용자 정의 값으로 수정하거나 기본값과 함께 믹스인을 사용할 수 있습니다. 다음은 기본 설정을 사용하여 간격이 있는 2열 레이아웃을 만드는 예입니다.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

주요 내용

보조 콘텐츠

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

그리드 사용자 정의

내장된 그리드 Sass 변수와 맵을 사용하여 사전 정의된 그리드 클래스를 완전히 사용자 정의할 수 있습니다. 계층 수, 미디어 쿼리 크기 및 컨테이너 너비를 변경한 다음 다시 컴파일합니다.

기둥 및 거터

그리드 열의 수는 Sass 변수를 통해 수정할 수 있습니다. $grid-columns각 개별 열의 너비(백분율)를 생성하는 데 사용되며 열 거터에 대해 균등 $grid-gutter-width하게 분할된 중단점별 너비를 허용합니다 .padding-leftpadding-right

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

그리드 계층

열 자체를 넘어 그리드 계층의 수를 사용자 정의할 수도 있습니다. 4개의 그리드 계층만 원하는 경우 및 다음과 같이 업데이트 $grid-breakpoints합니다 $container-max-widths.

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass 변수 또는 맵을 변경할 때 변경 사항을 저장하고 다시 컴파일해야 합니다. 그렇게 하면 열 너비, 오프셋 및 순서에 대한 사전 정의된 그리드 클래스의 새로운 세트가 출력됩니다. 반응형 가시성 유틸리티도 사용자 지정 중단점을 사용하도록 업데이트됩니다. 그리드 값을 px( rem, em, 또는 가 %아님) 설정해야 합니다.