CSS 그리드에서 auto-fit 값의 의미

이제 auto-fit 값에 대해 살펴보겠습니다. 이 값은 repeat 함수와 함께 사용하여 동일한 크기의 열을 지정할 때 적용됩니다. auto-fill 값과의 차이점은, auto-fit이 컨테이너의 사용 가능한 너비에 맞게 열 수를 조정하여 확장하거나 축소한다는 점입니다.

예시

여덟 개의 요소를 가진 컨테이너를 예로 들어 auto-fit 값의 동작을 살펴보겠습니다. 이전 강의에서 알게 된 minmax 함수를 auto-fit 값과 함께 적용해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예시

이제 그리드 컨테이너의 너비를 400px로 줄여 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

실습 문제

아홉 개의 요소로 이루어진 표가 있다고 가정합니다. auto-fit 값을 사용하여 열 너비와 그리드 컨테이너 너비를 설정하여 모든 자식 요소가 세 줄에 배치되도록 하세요.

이제 앞선 문제를 수정하여 모든 요소가 두 줄에 배치되도록 하세요.