처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
퀴즈 / CSS / 문제

CSS Grid에서 repeat(auto-fill, minmax(200px, 1fr))의 동작으로 올바른 것은?

보통 MDN Web Docs
보기 및 정답
A 컨테이너 너비에 맞춰 최소 200px인 열을 자동으로 채우되 남은 공간은 균등 분배한다
B grid-auto-flow: dense를 적용하면 그리드 아이템 순서가 항상 역순으로 배치된다
C grid-column: span 2는 아이템의 너비를 2배로 확대하는 것을 의미한다
D grid-template-columns에서 fr 단위는 고정 픽셀 값으로 변환된다

해설

repeat(auto-fill, minmax(200px, 1fr))은 컨테이너에 최소 200px 너비의 열을 가능한 만큼 자동으로 배치합니다. 남은 공간은 1fr에 의해 균등하게 분배됩니다. auto-fit을 사용하면 빈 트랙이 축소되어 아이템이 늘어나는 차이가 있습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기