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

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

※ BS5에 '초초대형 기기 분기점' 새로 생기고 거터 단위 바뀐 거 외엔 BS4와 동일.

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

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

BS5 Grid 클래스

• .col, .col-○ (extra small device : 화면너비 < 576px)
• .col-sm, .col-sm-○ (smll device : 화면너비 >= 576px)
• .col-md, .col-md-○ (medium device : 화면너비 >= 768px)
• .col-lg, .col-lg-○ (large device : 화면너비 >= 992px)
• .col-xl, .col-xl-○ (xlarge device : 화면너비 >= 1200px)
• .col-xxl, .col-xxl-○ (xxlarge device : 화면너비 >= 1400px)

 

---

PS.

• 기본적으로 6개 클래스 제공. 
• 위 클래스 결합해 역동적이고 유연한 레이아웃 제작 가능.
• 각 클래스는 상위 기기에 확장 적용되므로 sm/md 경우 sm만 설정하면 됨.

 

BS5 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. BS 버전별 그리드 기반

• BS3: float 기반 대신
• BS4/BS5: flexbox 기반 그리드 사용.

 

PS.

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

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

 

BS5 flexbox : IE10 이상 지원.

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

BS5 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, xxl 중 하나

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 | .col-xxl 

 

BS5 Grid 분기점 ★

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

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

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

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