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