CSS 그리드에서 fr 단위

그리드에서 행과 열의 크기는 px뿐만 아니라 유연성 단위인 fr(프랙션)로도 설정할 수 있습니다. 이 단위를 사용한다는 것은 요소를 배치할 수 있는 모든 공간이 동일한 부분, 즉 프랙션으로 나뉜다는 것을 의미합니다. 각 요소는 이 분할된 공간의 특정 부분을 차지할 수 있습니다. 어떻게 하는지 살펴보겠습니다.

grid-template-columns 속성을 사용하여 그리드의 첫 번째와 두 번째 열이 컨테이너 공간의 한 부분을 차지하고, 세 번째 열이 세 부분을 차지하도록 만들어 봅시다:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

그리드에 두 개의 열이 있다고 가정합니다. 두 열의 너비가 같도록 만드세요.

그리드에 세 개의 열이 있다고 가정합니다. 세 열의 너비가 같도록 만드세요.

그리드에 세 개의 열이 있다고 가정합니다. 세 번째 열이 첫 번째와 두 번째 열보다 두 배 더 크도록 만드세요.