[grid] BS4 - Grid (BS그리드) - 반응형 레이아웃 ★★★

목차

1. BS4 Grid 원리 - 전체 너비를 12등분해서 배분
2. BS4 Grid 클래스
3. BS4 Grid 규칙 
4. BS4 Grid 구문
5. BS4 Grid 분기점 ★

 

BS4 Grid 원리 - 전체 너비를 12등분해서 배분

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

https://homzzang.com/b/bs4-4

 

BS4 Grid 클래스

.col, .col-○ (extra small device : 화면너비 < 576px)

.col-sm, .col-sm-○ (smll device : 화면너비 >= 576px)

.col-md, .col-md-○ (middle device : 화면너비 >= 768px)

.col-lg, .col-lg-○ (large device : 화면너비 >= 992px)

.col-xl, .col-xl-○ (extra large device : 화면너비 >= 1200px)

 

---

PS.

1. 기본적으로 5개 클래스 제공. 

2. 위 클래스 결합해 역동적이고 유연한 레이아웃 제작 가능.

3. 각 클래스는 상위 기기에 확장 적용되므로 sm・md 경우 sm만 설정하면 됨.

 

 

BS4 Grid 규칙 

 

1.

올바른 정렬 및 패딩을 위해 row(행)을 .container(박스형) 또는 .container-fluid(와이드형) 안에 배치.

 

2.

row (행)을 사용해 가로 column(열) 그룹 생성.

 

3.

내용은 column(열) 안에 배치해야하며, column(열)만 row(행)의 직계 자식 가능.

 

4.

미리 정의된 클래스인 .row , .col-sm-4 등 클래스는 레이아웃 신속한 생성에 유용.

 

5.

column(열)은 padidng(안여백) 통해 gutter(column(열) 내용 사이의 간격) 생성.
.row 클래스의 음수 margin(바깥여백) 통해 row(행) 양쪽 끝선에 컬럼 내용을 맞춤.

 

6.

그리드 column(열)은 12개의 column(열) 개수를 배분해 생성.
(예) 한 행에 col-sm-4 클래스 3개 사용.

 

7.

column(열) 너비는 %(백분율)로 표시되므로, 항상 부모 요소 기준으로 유동적으로 너비 설정.

 

8.

BS3과 BS4 가장 큰 차이점:  BS4가 float 대신 flexbox 그리드 사용.

 

PS.

flexbox 장점: 너비 지정 없는 그리드 열이 자동으로 "같은 너비 열"(및 동일한 높이)로 레이아웃 됨.

(예) : .col-sm 클래스 갖는 3개의 요소는 sm 이상 분기점부터 자동으로 각각 너비가 33.33 % 차지.

 

BS4 flexbox : IE10 이상 지원.

cf. BS3: IE8/9 지원. (가장 안정적, 버그수정 지원. 단, 새 기능 추가는 안 됨)

 

BS4 Grid 구문

[수동 설정]

 

<div class="row">

  <div class="col-A-B">...</div>

  <div class="col-A-B">...</div>

  <div class="col-A-B">...</div>

</div>

 

A: 반응기기. sm, md, lg, xl 중 하나

B: 컬럼개수. 1 ~ 12 중 숫자. 단, (∑B = 12) 즉, B의 합은 12여야 함.

 

---

[자동 설정]

 

<div class="row">

  <div class="col"></div>

  <div class="col"></div>

  <div class="col"></div>

  <div class="col"></div>

</div>

 

※ 각 요소 너비 = (100/col개수)%

※ 반응기기 설정가능. (예) .col-sm | .col-md | .col-lg | .col-xl

 

 

BS4 Grid 분기점 ★

	초소형 < 576px	소형기기 >= 576px	중형기기 >= 768px	대형기기 >= 992px	초대형기기 >= 1200px
Class 접두어	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Grid 원리	항상 수평	분기미만:수직 분기이상:수평	분기미만:수직 분기이상:수평	분기미만:수직 분기이상:수평	분기미만:수직 분기이상:수평
Container 너비	None (auto)	540px	720px	960px	1140px
적합기기	폰 세로	폰 가로	태블릿	노트북	노트북/PC
컬럼개수	12	12	12	12	12
Gutter (거터)	30px (= 15 x 2)	30px (= 15 x 2)	30px (= 15 x 2)	30px (= 15 x 2)	30px (= 15 x 2)
Nestable	yes	yes	yes	yes	yes
Offset	yes	yes	yes	yes	yes
Column ordering	yes	yes	yes	yes	yes

※ Gutter (거터) : 컬럼 사이 너비 (= 컬럼 간 간격)

※ Nestable : 다른 요소 안에서 사용 가능한지 여부 의미.

※ Offset : row(행)에 음수 margin 줘서 양쪽 끝선 레이아웃을 맞추는지 여부.

※ Column ordering : Column(열)이 순서적으로 배치 정렬되는지 여부.