[basic] BS5 - Grid (BS그리드)

1. BS5 Grid 기본 구조 (너비 12등분 후 배분)
2. BS5 Grid 분기점
3. BS5 Grid 예제

※ BS5에 '초초대형 기기 분기점' 새로 생긴 것 외엔 BS4와 동일.

BS5 Grid 기본 구조 (너비 12등분 후 배분) 

BS5 Grid 분기점

 

1. 

화면너비 구분:  6개 

• .col :  576px 미만 - 초소형 기기 (extra small device)
• .col-sm-○ :  576px 이상 - 소형 기기 (small device)
• .col-md-○ : 768px 이상 - 중형 기기 (middle divice)
• .col-lg-○ : 992px 이상 - 대형 기기 (large device)
• .col-xl-○ : 1200px 이상 - 초대형 기기 (xlarge device)
• .col-xxl-○ :  1400px 이상 - 초초대형 기기 (xxlarge device) (BS5부터 생김.)

 

2.

각 클래스는 결합해서 보다 역동적이고 유연한 레이아웃 가능.

3.

sm과 md에 대해 동일 너비 설정하려면 sm만 지정하면 됨. (∵ BS는 모바일 우선 접근 정책에 따라, 적은 기기 지정하면 큰 기기는 자동 적용됨.)

 

BS5 Grid 예제

[예제1] - 모든 화면너비에서 가로 동일 3등분 나열. 

(단, 화면 너비가 너무 작으면 밑으로 하나씩 밀림)

 

<div class="row">

  <div class="col">홈짱닷컴 Homzzang.com</div>

  <div class="col">홈짱닷컴 Homzzang.com</div>

  <div class="col">홈짱닷컴 Homzzang.com</div>

</div>

 
결과보기 

---

[예제2] - 576px 이상 화면에서 가로 4등분 나열. 

※ 576px 미만 경우 세로 1열로 쌓임.

★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.

 

<div class="row">

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

</div>

 
결과보기

---

[예제3] - 576px 이상 화면에서 가로 2등분 나열. 

※ 576px 미만 경우 세로 1열로 쌓임.

★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.

 

<div class="row">

  <div class="col-sm-4">.col-sm-4</div>

  <div class="col-sm-8">.col-sm-8</div>

</div>

 

결과보기