[CSS] 그리드 시스템

#그리드 시스템의 개념 

 

1. container : 그리드 시스템이 전체 적용되는 범위 

 

 

 

2. column : 한 칸을 한 컬럼이라고 이야기함 

 

3. gutter : 컬럼 양쪽에 여백을 주는 것 

 

 

 

#부트스트랩 사용법 

부트스트랩 그리드 기본 문법 

<Container> 

  <Row> (항상 row는 넣어줘야함, 한 줄을 뜻함)

      <Col>

         <div></div>

      </Col>

 

Contianer부터 Col까지 내려가는 자식은 반드시 지켜줘야하는 부트스트랩 문법 

 

예시)

 

col-1과 col-12의 차이, row라는 박스에서 가로로 얼마나 차지 하느냐를 결정함

그런데 왜 아래로 떨어지는가?

1줄의 col의 최대값은 12인데 1 + 12 = 13이니까 col 12를 넘어서는 순간 자동으로 떨어짐 

 

 

총합이 12인 경우엔 1줄을 유지하는 것을 볼 수 있다.

+

각각의 브레이크마다 컬럼을 달리줄 수 있다.

 

클래스를 주면 된다.

col-12, col-sm-6, col-md-4 (... 더 큰 사이즈도 가능 lg, xl)

=> 모바일 사이즈일때는 col-12

=> 모바일 사이즈를 넘어가면 (sm) 사이즈일때는 col 6으로 줄어듬 

=> 태블릿 사이즈를 넘기면 (md) 사이즈일 때는 col 4로 줄어듬

 

 

Extra small
Max container width  : none (auto)

Small
Max container width  : 540px 

Midium 
Max container width  : 720px

Large
Max container width  : 960px

Extra Large
Max container width  : 1140px

 

col-12를 꽉 차지함 (모바일 사이즈 기준)

sm 사이즈를 넘어서는 순간 col-6가 자동으로 적용

 

 

#가장 많이 쓰는 레이아웃 

 

1. 모바일일 때는 다 차지했다가

2. 태블릿에서는 2칸 

3. 데스크탑에서는 4칸 

 

예시)

 

 

1. 모바일

모바일일때는 4개가 각각 1개씩 차지해서 4칸

 

2. 태블릿 사이즈 

2개씩 차지해서 2칸

3. 데스크탑 사이즈 

4개 요소가 1칸을 다 차지하는 모습