[그리드 시스템] 부트스트랩

부트스트랩 5.1  그리드 시스템

모바일 우선된 flexbox 그리드를 사용하여 

12개 열 시스템으로 이루어져 있으며,

6개 열 기본 반응형등 12로 나누어 떨어지게만 클래스를 지정하면

간단하게 반응형 레이아웃을 만들수 있다. 

 

예제 _ 행1개

---

<div class="container">
  <div class="row">
    <div class="col">
      한칸
    </div>
    <div class="col">
      두칸
    </div>
    <div class="col">
      세칸
    </div>
  </div>
</div>

---

1. 부모를 container로 감싼다.

2. 자식으로 row 행을 만든다.

3. 손자로 col 열을 나눈다.

4. 손자이름은 모두 col이기 때문에 12/3 그리드를 4개씩 나누어 갖는다 

 

참 쉽죠잉~

 

예제_ 행2개 

---

<div class="container">
  <div class="row">
    <div class="col">
      6개씩 나눠 가지자
    </div>
    <div class="col">
      6개씩 나눠 가지자
    </div>
  </div>
  <div class="row">
    <div class="col">
      3개씩 나눠 가지자
    </div>
    <div class="col">
      3개씩 나눠 가지자
    </div>
    <div class="col">
      3개씩 나눠 가지자
    </div>
  </div>
</div>

---

1. 부모를 container로 감싼다.

2. 자식으로 row 행을 2개 만든다.

3. 손자로 col 열을 나눈다.

4. 첫번째 행은 6개씩 나눠 가지고 두번째 행은 3개씩 나눠 가졌다.

 

참 쉽죠잉~

 

예제_ 너비가 정해진 경우 

---

<div class="container">
  <div class="row">
    <div class="col">
      나머지를 나랑 나누자 6개 남았으니 3개 줘라
    </div>
    <div class="col-6">
      난 무조건 6개 가져갈게
    </div>
    <div class="col">
      나머지를 나랑 나누자 6개 남았으니 3개 줘라
    </div>
  </div>
</div>

---

1. 부모를 container로 감싼다.

2. 자식으로 row 행을 1개 만든다.

3. 손자로 col 열을 나눈다.

4. 손자 하나가 무조건 6개 가져간다네 그럼 6개 둘이 나눠 갖자!

 

참 쉽죠잉~

 

예제_ 가변너비

---

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      넓은 화면에서는 2개 사용하고 작은 화면에서는 나눠가져
    </div>
    <div class="col-md-auto">
      중간화면에서는 알아서 가져가라
    </div>
    <div class="col col-lg-2">
      넓은 화면에서는 2개 사용하고 작은 화면에서는 나눠가져
    </div>
  </div>
  <div class="row">
    <div class="col">
      3개중 남은거 나눠가져가
    </div>
    <div class="col-md-auto">
      중간화면에서 알아서 가져가라
    </div>
    <div class="col col-lg-2">
      넓은화면에서는 2개 가져가고 나머지에서는 나눠가져
    </div>
  </div>
</div>

---

1. 부모를 container로 감싼다. 중간 화면일때 콘텐츠를 중앙 정렬해라

2. 자식으로 row 행을 2개 만든다.

3. 1행 넓은화면에서는 12개로 나눈것 중 2개 가져가라 나머지 화면에서는 나눠가져라

4. 2행 끝에 있는 녀석이 큰화면에서 두개 가져간데, 나머지는 남은거 나눠갖자

 

약간 햇갈릴 수 있어요

 

예제_ 반응형 클래스

---

<div class="container">
  <div class="row">
    <div class="col">똑같이 나누자</div>
    <div class="col">똑같이 나누자</div>
    <div class="col">똑같이 나누자</div>
    <div class="col">똑같이 나누자</div>
  </div>
  <div class="row">
    <div class="col-8">8개 가져간다</div>
    <div class="col-4">4개 가져간다</div>
  </div>
</div>

---

1. 부모를 container로 감싼다. 

2. 자식으로 row 행을 2개 만든다.

3. 1행 다똑같이 나누자

4. 2행 첫째는 8개 둘째는 4개 가져간다

 

쉽죵~