Grid 핵심정리 #5 - 그리드 자동 정의

이 게시글은 [CSS Flex와 Grid 제대로 익히기]의 강의를 보며 정리한 내용입니다.

출처: https://www.inflearn.com/course/css-flex-grid-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B5%ED%9E%88%EA%B8%B0/dashboard

CSS Flex와 Grid 제대로 익히기 강의 | 1분코딩 - 인프런

출처: https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

---

grid-template-rows는 repeat을 통해 몇 번 반복할 것인지 지정해야 했다.

.container {
	grid-template-rows: repeat(3, minmax(100px, auto));
}

 

하지만 정적인 데이터가 아니라, 몇 번 반복할지 매번 바뀐다면?

grid-auto-rows를 사용하자

.container {
	grid-auto-rows: minmax(100px, auto);
}

 

반복 횟수를 지정해줄 필요 없이 자동으로 반복한다.