03/15 HTML/CSS Grid 레이아웃

 

Grid 레이아웃

 

 

grid 시스템을 이해하려면 반응형이 무엇인지 알아야 한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

pc에선 8줄, 모바일에선 2줄

 

 

 

 

 

 

줄에 맞춰서 컨텐츠를 입힐때 그리드 시스템 사용

 

 

그리드 시스템을 사용하면 픽셀이 아니라 column의 개수로 바꿔 씀

 

Gutter : column 사이의 간극, gap 

 

 

 

 

 

 

 

 

Grid Track #1

고정크기 트랙(column)만들기

 

-> 격자형을 만드는 것에 포커스를 맞추자

 

 

 

이 상태는 아무것도 일어나지 않음

 

 

                                      ↓

 

 

 

 

 

 

 

칸 만들기

 

 

 

 

 

 

 

Grid Track #2

가변크기 트랙(column)만들기

 

대략적인 비율로 크기를 정해놓아야지 px로 박아버리면 반응형 만들 수 없어

 

 

 

 

2fr 1fr 로 숫자를 다르게 해서 비율로 맞출 수 있음

 

 

fr -> 그리드 시스템에서의 한 조각, 여백을 나눠가진 것이 아님

         여백이 아니고 화면을 똑같이 나눠서 몇조각씩을 가질 것인지..

 

flex-grow : 여백의 크기에 컨텐츠의 크기까지 합쳐져서 크기가 똑같이 배분되지 않음

 

 

 

 

 

 

 

 

 

Grid Track #3

repeat를 이용한 트랙(column)만들기

 

오른쪽과 같은 형식으로 사용

 

 

12칸을 만들겠다

 

 

 

auto-fill 과 auto-fit

 

 

 

 

 

 

 

 

 

auto-fill 

: 모눈종이를 잘 만드는 것이 중요하다  (어떤크기로 몇개를)

  그 위에 맞춰 붙이면 되기 때문에

 

 

 

 

 

auto-fit

: 컨텐츠가 사용되고 있는 범주내에서 맞춰줌 , 컨텐츠가 있어야 만들어짐

 

 

 

 

 

 

 

 

그리드 시스템은 전역적으로 모눈종이를 만드는 일이고 그 모눈종이에 컨텐츠를 위치하게 붙이는 것이다.