[grid] BS5 - Grid Example (BS그리드 예제) ★

1. Three Equal Columns (3개 동일 너비 컬럼)
2. Setting One Column Width (다른 너비 컬럼 설정)
3. More Equal Columns (그외 동일 너비 컬럼)
4. Row Cols (가로 컬럼 개수 제한)
5. More Unequal Columns (그외 다른 너비 컬럼)
6. Equal Height (동일 높이)
7. Nested Columns (안긴 컬럼)
8. Responsive Classes (반응형 클래스)
9. Stacked to Horizontal (sm 이상 시, 수직 → 수평)
10. Mix and Match  (기기 클래스 혼용)
11. No Gutters (컬럼 사이 여백 제거)

※ Grid (그리드) : 가로 전체 너비를 12등분 후, 각 컬럼의 너비 설정.

※ BS4와 거의 동일. 단, 초초대형 기기  지원 및 Gutter 제어 클래스 다름.

Three Equal Columns (3개 동일 너비 컬럼)

[숫자 사용 X]

 

<div class="row">

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

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

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

</div>

 

결과보기

---

[숫자 사용 O]

 

<div class="row">

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

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

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

</div>

 

결과보기

※ BS4와 동일

Setting One Column Width (다른 너비 컬럼 설정)

[셋 다 숫자 사용]

 

<div class="row">

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

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

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

</div>

 

결과보기

---

[가운데만 숫자 사용]

 

<div class="row">

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

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

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

</div>

 

결과보기

※ BS4와 동일

More Equal Columns (그외 동일 너비 컬럼)

[2개 동일 너비]

 

<div class="row">

  <div class="col">1 of 2</div>

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

</div>

 

결과보기

---

[4개 동일 너비]

 

<div class="row">

  <div class="col">1 of 4</div>

  <div class="col">2 of 4</div>

  <div class="col">3 of 4</div>

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

</div>

 

결과보기

---

[6개 동일 너비]

 

<div class="row">

  <div class="col">1 of 6</div>

  <div class="col">2 of 6</div>

  <div class="col">3 of 6</div>

  <div class="col">4 of 6</div>  

  <div class="col">5 of 6</div>

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

</div>

 

※ BS4와 동일

Row Cols (가로 컬럼 개수 제한)

[1줄에 1개 컬럼 허용]

 

<div class="row row-cols-1">

   <div class="col">1 of 2</div>

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

</div>

 

결과보기

---

[1줄에 2개 컬럼 허용]

 

<div class="row row-cols-2">

  <div class="col">1 of 4</div>

  <div class="col">2 of 4</div>

  <div class="col">3 of 4</div>

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

</div>

 

결과보기

---

[1줄에 3개 컬럼 허용]

 

<div class="row row-cols-3">

  <div class="col">1 of 6</div>

  <div class="col">2 of 6</div>

  <div class="col">3 of 6</div>

  <div class="col">4 of 6</div>  

  <div class="col">5 of 6</div>

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

</div>

 

결과보기 

※ BS4와 동일

More Unequal Columns (그외 다른 너비 컬럼)

[2개 다른 너비 컬럼]

 

<div class="row">

  <div class="col-8">1 of 2</div>

  <div class="col-4">2 of 2</div>

</div>

 

결과보기 

---

[4개 다른 너비 컬럼]

 

<div class="row">

  <div class="col-2">1 of 4</div>

  <div class="col-2">2 of 4</div>

  <div class="col-2">3 of 4</div>

  <div class="col-6">4 of 4</div>

</div>

 

결과보기 

---

[4개 중 2개 컬럼만 너비 설정]

 

<div class="row">

  <div class="col-4">1 of 4</div>

  <div class="col-6">2 of 4</div>

  <div class="col">3 of 4</div>

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

</div>

 

결과보기

※ BS4와 동일

Equal Height (동일 높이)

※ 어느 한 컬럼의 높이가 늘어나면, 나머지 컬럼의 높이도 자동 변경됨.

 

<div class="row">

  <div class="col">Lorem ipsum...</div>

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

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

</div>

 

결과보기

※ BS4와 동일

Nested Columns (안긴 컬럼)

 

<div class="row">

  <div class="col-8">

    .col-8

    <div class="row">

      <div class="col-6">.col-6</div>

      <div class="col-6">.col-6</div>

    </div>

  </div>

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

</div>

 

결과보기 

※ BS4와 동일

Responsive Classes (반응형 클래스)

 

.col- (extra small devices : 화면너비 < 576px)

.col-sm- (small devices : 화면너비 >= 576px)

.col-md- (medium devices : 화면너비 >= 768px)

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

.col-xl- (xlarge devices : 화면너비 >= 1200px) 

.col-xxl- (xxlarge devices : 화면너비 >= 1400px) 

 

---

PS.

1. 기본 6개 클래스 제공.
2. 위 클래스를 결합해 역동적이고 유연한 레이아웃 구성 가능.

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

 

Stacked to Horizontal (sm 이상 시, 수직 → 수평)

 

<div class="row">

  <div class="col-sm-9">col-sm-9</div>

  <div class="col-sm-3">col-sm-3</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> 

 

결과보기 

※ BS4와 동일

Mix and Match  (기기 클래스 혼용)

(sm 미만 시 6:6) → (sm 이상 시 9:3)

 

<div class="row">

  <div class="col-6 col-sm-9">col-6 col-sm-9</div>

  <div class="col-6 col-sm-3">col-6 col-sm-3</div>

</div>

 

결과보기

---

(lg 미만 시 7:5) → (lg 이상 시 8:4)

 

<div class="row">

  <div class="col-7 col-lg-8">col-7 col-lg-8</div>

  <div class="col-5 col-lg-4">col-5 col-lg-4</div>

</div>

 

결과보기

---

(sm 미만 시 수직) → (sm 이상 시 3:9) → (md 이상 시 6:6) → (lg 이상 시 4:8)

 

<div class="row">

  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>

  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>

</div> 

 

결과보기 

※ BS4와 동일

No Gutters (컬럼 사이 여백 제거)

 

gutter (거터) : 컬럼 좌우 내부 여백.

 

---

[gutter 제어 클래스]

• .g-0 ~ .g-5 클래스 사용. (기본값: .g-4)
• .gx-0 ~ .gx-5 클래스: 동일
• .gy-0 ~ .gy-5 클래스: 동일

  

---

 

<div class="row g-0">

  <div class="col-3 bg-success">col-3</div>

  <div class="col-9 bg-warning">col-9</div>

</div>

 

결과보기

---

PS.

 

.g-0,

.gx-0 {

  --bs-gutter-x: 0;

}

.g-0,

.gy-0 {

  --bs-gutter-y: 0;

}

.g-1,

.gx-1 {

  --bs-gutter-x: 0.25rem;

}

.g-1,

.gy-1 {

  --bs-gutter-y: 0.25rem;

}

.g-2,

.gx-2 {

  --bs-gutter-x: 0.5rem;

}

.g-2,

.gy-2 {

  --bs-gutter-y: 0.5rem;

}

.g-3,

.gx-3 {

  --bs-gutter-x: 1rem;

}

.g-3,

.gy-3 {

  --bs-gutter-y: 1rem;

}

.g-4,

.gx-4 {

  --bs-gutter-x: 1.5rem;

}

.g-4,

.gy-4 {

  --bs-gutter-y: 1.5rem;

}

.g-5,

.gx-5 {

  --bs-gutter-x: 3rem;

}

.g-5,

.gy-5 {

  --bs-gutter-y: 3rem;

} 

 

cf. BS4 경우, .no-gutters 클래스 사용.