그리드 시스템

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

이 페이지에서

예시

Bootstrap의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사용하여 콘텐츠를 레이아웃하고 정렬합니다. flexbox 로 제작되었으며 완벽하게 반응합니다. 다음은 그리드 시스템이 함께 제공되는 방법에 대한 예와 자세한 설명입니다.

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

열

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

위의 예에서는 사전 정의된 그리드 클래스를 사용하여 모든 장치와 뷰포트에 동일한 너비의 열 3개를 만듭니다. 이러한 열은 부모가 있는 페이지의 중앙에 .container있습니다.

작동 방식

이를 세분화하면 그리드 시스템이 함께 제공되는 방법은 다음과 같습니다.

우리 그리드는 6개의 반응형 중단점 을 지원합니다 . 중단점은 미디어 쿼리를 기반으로 min-width합니다. 즉, 중단점과 그 위에 있는 모든 중단점에 영향을 미칩니다(예: , , , 및 에 .col-sm-4적용됨 ). 즉, 각 중단점별로 컨테이너 및 열 크기 및 동작을 제어할 수 있습니다.smmdlgxlxxl
컨테이너는 콘텐츠를 중앙에 놓고 가로로 채웁니다. 모든 뷰포트 및 장치에 대해 .container반응형 픽셀 너비에 사용 하거나 유동 및 픽셀 너비 조합에 대해 반응형 컨테이너(예: )에 사용합니다..container-fluidwidth: 100%.container-md
행은 열의 래퍼입니다. 각 열에는 padding그 사이의 공간을 제어하기 위한 수평(거터라고 함)이 있습니다. 그런 padding다음 열의 콘텐츠가 왼쪽 아래로 시각적으로 정렬되도록 하기 위해 음수 여백이 있는 행에 대해 상쇄됩니다. 행은 또한 열 크기를 균일하게 적용 하는 수정자 클래스 와 콘텐츠의 간격을 변경하는 여백 클래스 를 지원합니다.
열은 매우 유연합니다. 행당 12개의 템플릿 열을 사용할 수 있으므로 여러 열에 걸쳐 있는 다양한 요소 조합을 만들 수 있습니다. 열 클래스는 확장할 템플릿 열의 수를 나타냅니다(예: col-44개 확장). widths는 백분율로 설정되므로 항상 동일한 상대적 크기를 갖습니다.
거터는 또한 반응이 빠르고 사용자 정의가 가능합니다. 여백 및 패딩 간격과 동일한 크기로 모든 중단점에서 거터 클래스를 사용할 수 있습니다 . 클래스가 있는 수평 거터 , 가 있는 수직 거터 또는 클래스가 있는 모든 거터를 변경 합니다. 거터를 제거하는 데에도 사용할 수 있습니다..gx-*.gy-*.g-*.g-0
Sass 변수, 맵 및 믹스인은 그리드를 구동합니다. Bootstrap에서 미리 정의된 그리드 클래스를 사용하지 않으려면 그리드의 소스 Sass 를 사용하여 더 의미 있는 마크업으로 직접 만들 수 있습니다. 또한 더 큰 유연성을 위해 이러한 Sass 변수를 사용하는 일부 CSS 사용자 정의 속성도 포함합니다.

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

그리드 옵션

Bootstrap의 그리드 시스템은 6개의 기본 중단점과 사용자 정의한 모든 중단점에 걸쳐 적응할 수 있습니다. 6개의 기본 그리드 계층은 다음과 같습니다.

초소형(xs)
소형(중)
중간(md)
대형(lg)
특대형(xl)
특대형(xxl)

위에서 언급했듯이 이러한 각 중단점에는 고유한 컨테이너, 고유한 클래스 접두사 및 수정자가 있습니다. 다음은 이러한 중단점에서 그리드가 변경되는 방식입니다.

	xs <576px	SM ≥576px	md ≥768px	LG ≥992px	xl ≥1200픽셀	xxl ≥1400픽셀
컨테이너`max-width`	없음(자동)	540픽셀	720픽셀	960픽셀	1140픽셀	1320픽셀
클래스 접두사	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
열 수	12
거터 폭	1.5rem(좌우 .75rem)
맞춤형 거터	예
중첩 가능	예
열 순서	예

자동 레이아웃 열

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

동일한 너비

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

1/2

2/2

1/3

2/3

3/3

HTML

<div class="container text-center">
  <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>

하나의 열 너비 설정

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

1/3

3/2(넓음)

3/3

1/3

3/2(넓음)

3/3

HTML

<div class="container text-center">
  <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

HTML

<div class="container text-center">
  <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>

반응형 수업

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

모든 중단점

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

안부

열-8

4열

HTML

<div class="container text-center">
  <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>
</div>

수평으로 쌓임

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

col-sm-8

col-sm-4

col-sm

HTML

<div class="container text-center">
  <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>
</div>

믹스 앤 매치

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

.col-md-8

.col-6 .col-md-4

.col-6

HTML

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

행 열

반응형 .row-cols-*클래스를 사용하여 콘텐츠 및 레이아웃을 가장 잘 렌더링하는 열 수를 빠르게 설정합니다. .col-*일반 클래스는 개별 열에 적용되는 반면 (예: .col-md-4), 행 열 클래스는 부모 .row에 바로 가기로 설정됩니다. 와 함께.row-cols-auto 은 열에 자연적인 너비를 줄 수 있습니다.

이러한 행 열 클래스를 사용하여 기본 그리드 레이아웃을 빠르게 생성하거나 카드 레이아웃을 제어할 수 있습니다.

열

HTML

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

HTML

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

HTML

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

HTML

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

HTML

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

HTML

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

함께 제공되는 Sass mixin을 사용할 수도 있습니다 row-cols().

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

중첩

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

레벨 1: .col-sm-3

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

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

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>
</div>

사스

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

변수

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

믹신

믹스인은 그리드 변수와 함께 개별 그리드 열에 대한 의미론적 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

사용 예

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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);
  }
}

주요 내용

보조 콘텐츠

HTML

<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$grid-row-columns.row-cols-*

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, 또는 가 %아님) 설정해야 합니다.