CSS grid system에 대해

Flex Layout을 통해 1차원적인 박스 요소를 배치 했다면
Grid Layout을 통해 2차원적인 박스 요소를 배치 할수 있다.

부모요소(컨테이너)에 작성할 코드와 속성들

display: grid

먼저 부모 컨테이너에 display를 grid로 지정해주면
자식요소들을 배치할수 있는데 이때 부모 컨테이너에 지정할 속성들에 대해 알아보자.

grid-template-columns
grid-template-rows

column은 grid cell(자식요소)의 가로축
row는 gride cell의 세로축을 뜻하는데

위 코드는 부모요소에 지정해줌으로써 가로축과 세로축의 크기와 개수를 정할수 있

조금더 유연하게 사용할 수 있는 방법은

grid-template-areas

자식 요소간 배치 사이에 간격을 지정할 수 있는

grid-gap
	grid-column-gap
    grid-row-gap

column이나 row의 gap을 별도로 지정이 가능하다

자식요소(그리드셀)에 작성할 코드와 속성들

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-area

column(가로)의 시작과 끝을 지정
row(세로)의 시작과 끝을 지정
grid-template-areas와 혼합하여 어느 영역을 보여줄것 인지 지정

Emmet에 관련해서도 공부해보자