grid

grid-auto-rows / grid-auto-columns

grid-template-rows로 지정한 상태에서 행이 추가가 되면 추가된 행에 대해서 크기를 제어하고 싶을때에는 grid-auto-xxx를 사용한다.

grid-template-xxx 를 지정하지 않은상태에서 grid-auto-xxx 만 사용가능하며 추가될때마다 크기가 지정된다.

grid-auto-xxx는 repeat 사용이 불가능하다.

grid-template-rows : 1fr 1fr;

grid-auto-rows:100px;

grid 병합 : span

지정한 셀의 기준으로 아래방향으로 행 2개 병합

grid-row : span 2;

지정한 셀의 기준으로 우측방향으로 열 3개 병합

grid-column : span 3;

지정한 셀의 기준으로 윗방향으로 열 개 병합

grid-row : 2 span;

지정한 셀의 기준으로 좌측방향으로 열 3개 병합

grid-column : 3 span;

grid-auto-flow

그리드의 흐르는 방향을 정의

기본은 row로 흐른다.

1 2 3

4 5

grid-auto-flow:row;

1 3

2 4 5

grid-auto-flow:column;

dense는 그리드 빈칸을 채우기 위해서 작성함

grid-auto-flow:row dense;

fit-content

안에 있는 콘텐츠의 크기만큼만 커저라

단위를 넣게 되면 max-width가 된다.

grid-template-columns:fit-content(300px);

auto-fill

갯수는 지정하지 않고 알아서 영역을 채워 넣어라.

반드시 minmax와 함께 써야 한다.

grid-template-columns : repeat(auto-fill, minmax(120px, 1fr));

auto-fit

영역을 채우고 부모너비에 맞게 채워라.