grid의 정렬 속성에 대하여 알아보았다.
1. auto-fill과 auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채울 수 있다.
따라서 반응형을 보다 쉽게 만들 수 있고 repeat() 함수와 minmax() 함수랑 궁합이 잘 맞는다.
auto-fil 의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어갑니다.
auto-fill과 auto-fit 의 차이는
auto-fil은 크기보다 셀의 개수가 부족하면, 공간이 남게 되고
반대로 auto-fit을 사용하면, 남는 공간을 채운다.
2. row-gap / column-gap / gap
gap은 행과 행, 열과 열 사이에 간격을 지정해줄 수 있다. 더 정확히는, grid Line의 두께를 지정해주는 것이다.
3. align-content / justify-content
grid의 정렬 또한 flex의 정렬과 같은 테그를 사용한다.
세로축으로 정렬하는 align-content와 가로축으로 정렬하는 justify-content이 있고
사용할 수 있는 값도 start, center, end, space-around, space-between, space-evenly, stretch로 똑같다.