grid(3)

 

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로 똑같다.