Bootstrap 5 Grid System, 부트스트랩 그리드 시스템

Bootstrap Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a 12 column system,

6 default reponsive tiers, Sass variables and mixins, and dozens of predefined classes.

 

Bootstrap이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해서 가장 많이 사용이 필요한 기능

 

• Bootstrap Grid System은 flexbox로 제작되었다.
• container, rows, column으로 컨텐츠를 배치하고 정렬
• 반드시 기억할 2가지!!!
  • 12개의 column, 약수가 충분히 많기 때문에 12로 설정, 다양한 배율로 설정할 수 있다.
  • 6개의 grid breakpoints

 

Container

웹 페이지의 컨텐츠를 감싸고 그리드 시스템을 사용하기 위해서는 컨테이너 요소가 필요하다.

컨테이너 요소는 반응형 고정 폭 컨테이너를 만드는 .container 클래스나
뷰포트의 전체 폭까지 늘어나는 .container-fluid 클래스를 이용

 

row

columns의 wrapper, column을 감싸주는 역할

 

col, col-

row에 들어가는 각각의 content

grid layout에서 내용은 반드시 columns안에 있어야하며, 오직 columns만 row의 바로 하위 자식일 수 있다.

 

column class는 row당 가능한 12개 중 사용하려는 column 수를 나타낸다.

columns 너비는 백분율로 설정 되므로 항상 부모 요소를 기준으로 유동적으로 크기가 조정된다.

<div class="container">
    <h2 class="text-center">column class - 1</h2>
    <div class="row">
      <!-- 총 12개의 col이니깐, 각각 4개씩 차지하고 있다. -->
      <div class="box col">1</div>
      <div class="box col">2</div>
      <div class="box col">3</div>
      
      <!-- 위와 동일 -->
      <div class="box col-4">1</div>
      <div class="box col-4">2</div>
      <div class="box col-4">3</div>
	</div>
</div>

<div class="container">
    <h2 class="text-center">column class - 2</h2>
    <div class="row">
      <div class="box col">1</div>
      <div class="box col">2</div>
      <!-- 2줄로 나눌 수 있다. -->
      <div class="w-100"></div>
      <div class="box col">3</div>
      <div class="box col">4</div>
    </div>
</div>

<div class="container">
    <h2 class="text-center">column class - 3</h2>
    <div class="row">
      <!-- 12칸을 몇 칸씩 배분할 것인가 -->
      <div class="box col-2">1</div>
      <div class="box col-8">2</div>
      <div class="box col-2">3</div>

      <!-- 12개가 넘으면 밑으로 내려간다. -->
      <div class="box col-6">1</div>
      <div class="box col-8">2</div>
      <div class="box col-2">3</div>
    </div>
</div>

 

gutters

gird시스템에서 반응적으로 공간을 확보하고 컨텐츠를 정렬하는데 사용되는 column 사이의 padding

<div class="container">
    <h2 class="text-center">gutters</h2>
    <div class="row gx-5">
      <div class="col">
        <div class="box">col</div>
      </div>
      <div class="col">
        <div class="box">col</div>
      </div>
      <div class="col">
        <div class="box">col</div>
      </div>
    </div>
</div>

<div class="container">
    <h2 class="text-center">no gutters</h2>
    <div class="row g-0">
      <div class="col">
        <div class="box">col</div>
      </div>
      <div class="col">
        <div class="box">col</div>
      </div>
      <div class="col">
        <div class="box">col</div>
      </div>
    </div>
</div>

 

offset

지정한 만큼의 column 공간을 무시하고 다음 공간부터 컨텐츠를 적용

<div class="container">
    <h2 class="text-center">offset</h2>
    <!-- offest, offset-n n만큼 뒤에서 시작하겠다. -->
    <div class="row">
      <div class="box col-3 offset-4">.col-3 .offset-4</div>
      <div class="box col-1 offset-1">.col-1 .offset-1</div>
      <div class="box col-3">.col-3</div>
    </div>
</div>

 

nesting

row > col-* > row > col-*의 방식으로 중첩 사용 가능

<div class="container">
    <h2 class="text-center">nesting</h2>
    <!-- nesting, row안의 row -->
    <div class="row">
      <div class="box col-6">
        <div class="row">
          <div class="box col-3">1</div>
          <div class="box col-3">2</div>
          <div class="box col-3">3</div>
          <div class="box col-3">4</div>
        </div>
      </div>
      <div class="box col-6">1</div>
      <div class="box col-6">2</div>
      <div class="box col-6">3</div>
    </div>
</div>

 

Grid breakpoints

다양한 디바이스에서 적용하기 위해 특정 px(픽셀) 조건에 대한 지점을 정해 두었는데 이를 breakpoints라고 한다.

Bootstrap은 대부분의 크기를 정의하기 위해 em 또는 rem을 사용하지만, grid breakpoints는 px 사용

이는 viewport너비가 픽셀 단위이고 글꼴 크기에 따라 변하지 않기 때문이다.

xs	s	md	lg	xl	xxl
< 576px	≥ 576px	≥ 768px	≥ 992px	≥ 1200px	≥ 1400px