그리드 시스템

그리드 시스템 (Grid system)

12컬럼 시스템, 6개의 기본 반응형 tier, Sass 변수와 mixin, 그리고 수십 개의 미리 정의된 클래스 덕분에 다양한 모양과 크기의 레이아웃을 만들 수 있는 강력한 모바일 우선 flexbox 그리드를 사용해 보세요.

출처: 문서

본문

예시 (Example)

Bootstrap의 그리드 시스템은 일련의 컨테이너, row, column을 사용해서 콘텐츠를 배치하고 정렬해요. flexbox 기반으로 만들어졌으며 완전히 반응형이에요. 아래는 그리드 시스템이 어떻게 구성되는지에 대한 예시와 심층 설명이에요.

flexbox가 처음이거나 익숙하지 않다면 CSS Tricks flexbox 가이드에서 배경, 용어, 지침, 코드 스니펫을 읽어 보세요.

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

위 예시는 미리 정의된 그리드 클래스를 사용해 모든 디바이스와 뷰포트에서 동일한 너비의 세 컬럼을 만들어요. 이 컬럼들은 부모 .container로 페이지 가운데 정렬돼요.

동작 원리 (How it works)

그리드 시스템이 어떻게 구성되는지 살펴보면:

  • 우리 그리드는 6개의 반응형 브레이크포인트를 지원해요. 브레이크포인트는 min-width 미디어 쿼리를 기반으로 하므로, 해당 브레이크포인트와 그 이상의 모든 브레이크포인트에 영향을 줘요(예: .col-sm-4는 sm, md, lg, xl, xxl에 적용). 이렇게 하면 각 브레이크포인트별로 컨테이너와 컬럼의 크기와 동작을 제어할 수 있어요.
  • 컨테이너는 콘텐츠를 가운데 정렬하고 가로로 패딩을 더해요. 반응형 픽셀 너비에는 .container, 모든 뷰포트와 디바이스에서 width: 100%로 하려면 .container-fluid, 유동과 고정 너비를 조합하려면 반응형 컨테이너(예: .container-md)를 사용해요.
  • Row는 컬럼의 래퍼예요. 각 컬럼에는 컬럼 사이의 공간을 제어하기 위한 가로 패딩(거터)이 있어요. 이 패딩은 row에서 음수 마진으로 상쇄되어 컬럼의 콘텐츠가 왼쪽을 따라 시각적으로 정렬되도록 해요. Row는 또한 컬럼 크기를 균일하게 적용하는 수정자 클래스와 콘텐츠 간격을 바꾸는 거터 클래스를 지원해요.
  • 컬럼은 매우 유연해요. row당 12개의 템플릿 컬럼이 있어서 임의의 컬럼 수에 걸치는 요소 조합을 만들 수 있어요. 컬럼 클래스는 몇 개의 템플릿 컬럼에 걸치는지 나타내요(예: col-4는 네 개에 걸침). width는 퍼센트로 설정되므로 항상 동일한 상대 크기를 얻을 수 있어요.
  • 거터도 반응형이고 커스터마이즈할 수 있어요. 거터 클래스는 모든 브레이크포인트에서 마진·패딩 간격과 같은 크기로 제공돼요. 가로 거터는 .gx-* 클래스, 세로 거터는 .gy-*, 모든 거터는 .g-* 클래스로 바꿔요. .g-0으로 거터를 제거할 수도 있어요.
  • Sass 변수, 맵, mixin이 그리드를 뒷받침해요. Bootstrap의 미리 정의된 그리드 클래스를 사용하고 싶지 않다면, 그리드의 소스 Sass를 사용해 더 의미론적인 마크업으로 자신만의 그리드를 만들 수 있어요. 또한 이런 Sass 변수를 소비하는 CSS 커스텀 프로퍼티도 포함되어 더 큰 유연성을 제공해요.

flexbox의 한계와 버그(예: 일부 HTML 요소를 flex 컨테이너로 사용할 수 없는 문제)에 유의하세요.

그리드 옵션 (Grid options)

Bootstrap의 그리드 시스템은 6개의 기본 브레이크포인트와 커스터마이즈한 모든 브레이크포인트에 적응할 수 있어요. 여섯 개의 기본 그리드 tier는 다음과 같아요:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (xxl)

위에서 언급했듯이 이 브레이크포인트들 각각은 고유한 컨테이너, 클래스 접두어, 수정자를 가져요. 아래는 그리드가 이 브레이크포인트들에서 어떻게 변하는지 보여 줘요:

xs <576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px xxl ≥1400px
Container max-width 없음(auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (좌우 각각 .75rem)
Custom gutters 예(Yes)
Nestable 예(Yes)
Column ordering 예(Yes)

자동 레이아웃 컬럼 (Auto-layout columns)

.col-sm-6 같은 명시적인 번호 클래스 없이도 브레이크포인트별 컬럼 클래스를 활용해서 쉽게 컬럼 크기를 정할 수 있어요.

동일 너비 (Equal-width)

예를 들어 xs에서 xxl까지 모든 디바이스와 뷰포트에 적용되는 두 가지 그리드 레이아웃이 있어요. 필요한 각 브레이크포인트에 단위 없는 클래스를 몇 개든 추가하면 모든 컬럼이 같은 너비가 돼요.

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

한 컬럼 너비 설정 (Setting one column width)

flexbox 그리드 컬럼의 자동 레이아웃은 한 컬럼의 너비를 설정하고 형제 컬럼들이 그 주위로 자동으로 크기를 조정하게 하는 것도 뜻해요. 미리 정의된 그리드 클래스(아래처럼), 그리드 mixin, 또는 인라인 너비를 사용할 수 있어요. 가운데 컬럼의 너비에 관계없이 다른 컬럼들이 크기를 조정한다는 점을 기억하세요.

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

가변 너비 콘텐츠 (Variable width content)

col-{breakpoint}-auto 클래스로 콘텐츠의 자연스러운 너비에 따라 컬럼 크기를 정할 수 있어요.

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

반응형 클래스 (Responsive classes)

Bootstrap의 그리드는 복잡한 반응형 레이아웃을 구축하기 위한 6단계의 미리 정의된 클래스를 포함해요. extra small, small, medium, large, extra large 디바이스에서 원하는 대로 컬럼 크기를 커스터마이즈할 수 있어요.

모든 브레이크포인트 (All breakpoints)

가장 작은 디바이스부터 가장 큰 디바이스까지 동일한 그리드에는 .col과 .col-* 클래스를 사용해요. 특정한 크기의 컬럼이 필요할 때는 번호 클래스를 지정하고, 그 외에는 .col을 쓰는 게 좋아요.

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

쌓임에서 가로로 (Stacked to horizontal)

단일 세트의 .col-sm-* 클래스로, 처음에는 쌓였다가 small 브레이크포인트(sm)에서 가로로 되는 기본 그리드 시스템을 만들 수 있어요.

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

섞어 쓰기 (Mix and match)

일부 그리드 tier에서 컬럼을 단순히 쌓고 싶지 않다면, 필요에 따라 각 tier마다 서로 다른 클래스 조합을 사용해요. 아래 예시를 보면 더 잘 이해할 수 있어요.

<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 columns

반응형 .row-cols-* 클래스로 콘텐츠와 레이아웃을 가장 잘 렌더링하는 컬럼 수를 빠르게 설정할 수 있어요. 일반 .col-* 클래스가 개별 컬럼에 적용되는 반면(예: .col-md-4), row columns 클래스는 부모 .row에 바로가기(shorthand)로 설정돼요. .row-cols-auto로 컬럼에 자연스러운 너비를 줄 수 있어요.

이 row columns 클래스로 기본 그리드 레이아웃을 빠르게 만들거나 카드 레이아웃을 제어할 수 있어요.

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

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

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

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

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

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

중첩 (Nesting)

기본 그리드로 콘텐츠를 중첩하려면 기존 .col-sm-* 컬럼 안에 새 .row와 .col-sm-* 컬럼 세트를 추가해요. 중첩된 row에는 합이 12 이하가 되는 컬럼 세트가 포함되어야 해요(사용 가능한 12개 컬럼을 모두 쓸 필요는 없어요).

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

CSS

Bootstrap의 소스 Sass 파일을 사용할 때는 Sass 변수와 mixin으로 커스텀하고 의미론적이며 반응형인 페이지 레이아웃을 만들 수 있어요. 미리 정의된 그리드 클래스는 이 동일한 변수와 mixin을 사용해서 빠른 반응형 레이아웃을 위한 바로 사용 가능한 클래스 모음을 제공해요.

Sass 변수 (Sass variables)

변수와 맵은 컬럼 수, 거터 너비, 그리고 컬럼을 플로팅하기 시작할 미디어 쿼리 지점을 결정해요. 이들을 사용해 위에서 문서화한 미리 정의된 그리드 클래스를 생성하고, 아래에 나열된 커스텀 mixin에도 사용해요.

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

scss/_variables.scss

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

scss/_variables.scss

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

Sass mixin (Sass mixins)

Mixin은 그리드 변수와 함께 사용되어 개별 그리드 컬럼의 의미론적 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);

사용 예시 (Example usage)

변수를 자신만의 커스텀 값으로 수정하거나, 기본값 그대로 mixin을 사용할 수 있어요. 기본 설정을 사용해 사이에 간격이 있는 두 컬럼 레이아웃을 만드는 예시예요.

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

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

그리드 커스터마이즈 (Customizing the grid)

내장된 그리드 Sass 변수와 맵을 사용하면 미리 정의된 그리드 클래스를 완전히 커스터마이즈할 수 있어요. tier 수, 미디어 쿼리 차원, 컨테이너 너비를 바꾼 다음 다시 컴파일하세요.

컬럼과 거터 (Columns and gutters)

그리드 컬럼 수는 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;

그리드 tier (Grid tiers)

컬럼 자체를 넘어 그리드 tier의 수를 커스터마이즈할 수도 있어요. 네 개의 그리드 tier만 원한다면 $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, %가 아니라)로 설정해야 해요.

더 알아보기 (Learn more)