[Bootstrap] Grid System

부트스트랩에서 제공하는  그리드 시스템 (Grid System) 은 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽시스템을 의미한다.

 

그리드 시스템은 일련의 컨테이너(container), 행(row), 열(column)을 이용하여 콘텐츠를 레이아웃하고 정렬하며 반응형디자인이다.

 

1. container

 - container가 감싸고 있는 콘텐츠를 가운데 정렬해준다.

 - 반응형으로 너비(width)를 지정하려면 ➡ .container 

 - 화면의 100%로 너비(width)를 지정하려면 ➡ .container-fluid

 

2. row

 - column을 한줄로 감싸줌.

   (원래 div는 한줄을 차지하는 태그인데, row로 묶인 div끼리는 한줄안에 위치함.)

 

 3. column

 - row안에 들어가는 content

 - 1줄의 row안에 12칸의 column으로 나누어져 있을 때 몇칸씩 하나의 column으로 할 것인지 설정해주어야 함.

 

출처 : https://brunch.co.kr/@clay1987/134

ex)

.container{

     display : grid;

}

 

<div class="container">

  <div class="row">

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

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

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

  </div>

</div>

⬇ 실행

column1

column2

column3

 

 

그리드 계층

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

출처 : https://getbootstrap.kr/docs/5.0/layout/grid/

예를 들어, md( 미디움 ) 사이즈를 기준으로 했을 때,

화면의 크기가 768px이상일 때는, 내가 설정한 값대로 비율이 설정이 되고

768px미만이 되면 화면을 넘어가는 부분은 다음줄로 넘어가게 되는 식으로 

한줄에 다 나타나지 않게된다.

 

 

 

ex) 이렇게 설정하면

<div class="container">

  <div class="row">

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

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

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

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

  </div>

</div>

 

⬇실행 ( 768px이상일때 ) 

column1

column2

column3

column4

⬇실행 ( 768px미만 576px이상일때 ) 

column1	column2
column3	column4

⬇실행 ( 576px미만일때 )

column1

column2

column3

column4

 

 

아직 더 설명이 필요하지만 추후에 더 공부하여 포스팅하기 !