[CSS] grid레이아웃

CSS 레이아웃의 흐름 : Float > Flex > Grid

flex는 1차원적 배열 구조 : row, column 방향 택 1

flex를 여러번 중첩시켜서 사용하여 구조를 짠다.

grid는 2차원적 배열 구조 : row와 column 레이아웃 동시 설정 가능

요소의 속성을 grid로 변경
grid-line, grid-number
grid-template-rows
grid의 행의 개수 및 크기를 지정할 수 있다.
grid-template-rows : 1fr 2ft 200px
grid-template-columns
grid의 열의 개수 및 크기를 지정할 수 있다.
- fr : fraction(분수)의 약자, grid-template에서 사용할 수 있는 비율 단위
- repeat(a, b) : grid-template에서 사용할 수 있는 반복 함수, b 규격의 grid-template을 a개 생성한다.
  grid-template-columns : repeat(4, 1fr)  = grid-template-columns : 1fr 1fr 1fr 1fr
  grid-template-rows : repeat(2, 1fr 200px) = grid-template-rows : 1fr 200px 1fr 200px
  grid-template-rows : 3fr repeat(2, 1fr 200px) = grid-template-rows : 3fr 1fr 200px 1fr 200px

grid-column / grid-row
grid-item이 얼마만큼의 영역을 차지할 지 정의한다.
grid-column: 1/3
grid-column은 grid-line의 번호, grid-row는 grid-number의 번호를 기준으로 영역을 할당한다.

Flex

Grid

paso a paso