Grid system

Container 

<div class="container"> 
  <!-- ... --> 
</div>

<div class="container-fluid">
  <!-- ... --> 
</div>

 

1. container | 클래스가 container인 요소들은 아래 표와 같이 break point에서 max-width 값을 조정함으로써 반응형 디자인을 구현한다.
   • 부트스트랩의 Grid system은 컨테이너 안에서만 유효하다.  
2. container-fluid | 모든 break-points에서 max-width = 100%이다. 

 

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Grid System

grid system이란 디자이너가 웹 UI를 디자인할 때 이용하는 방식 중 하나를 말한다. 

 

 

1. container | grid system이 적용되는 전체 범위 
2. column | grid system에서 기준으로 삼는 일종의 가이드라인 
   • column의 개수로는 주로 12를 사용하는데, 12가 2, 3, 4, 6의 배수이기 때문에 다양한 레이아웃이 가능하기 때문이다. 이런 이유로 12를 magic number라고도 한다. 
   • 부트스트랩에서도 12개의 column을 사용한다. 
3. gutter | column과 column 사이의 간격으로, 컨텐츠와 컨텐츠를 시각적으로 분리하는 데 이용
   • container에 no-gutter class를 지정해서 공백을 없앨 수도 있다. 

 

<div class="container">
  <div class="row">
  <!-- 모든 col이 col-3가 된다 -->
    <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">자동으로 col-4가 된다</div>
  </div>
</div>

 

1. container > row > col 구조를 사용해야 한다. 
2. row | display: flex가 적용되어있는 flex box이다.  
3. col | 1 row(12 col) 안에서 col의 너비를 정하지 않았을 때에는, 모든 col이 동일한 너비를 갖게된다. 

Responsive Grid System

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

 

1. col-sm-8 | width가 sm size(576px) 이상일 때에는 col-8을 유지하고, 그 외에는 기본으로 할당되는 사이즈인 col-12를 유지한다.
2. col-sm | width가 sm size(576px) 이상일 때에는 col-4를 유지하고(col이 3개이므로), 그 외에는 기본으로 할당되는 사이즈인 col-12를 유지한다. 

+) responsive image