CSS 그리드에서 열의 개수와 너비

그리드 작업을 시작하며, 자식 요소들이 배치될 열의 개수와 너비를 지정하는 것부터 시작하겠습니다. 이를 위해 우리는 부모 요소에 지정되고, 그리드에서 자식 요소들이 차지할 열의 개수와 너비를 정의하는 속성 grid-template-columns를 사용합니다. 속성 값에는 픽셀 단위로 열 너비를 지정합니다.

예제

먼저 부모 요소를 생성하고 그리드 컨테이너로 만들어 봅시다. 네 개의 자식 요소가 있는 div가 있다고 가정합니다. 여기에 display 속성에 grid 값을 지정하고, grid-template-columns 속성에는 두 개의 열 너비를 정의합니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 크기가 다른 네 개의 열을 가진 표를 만들어 봅시다:

<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: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

실습 과제

아홉 개의 자식 요소를 가진 div가 있습니다. 부모 요소를 그리드 컨테이너로 만드세요.

자식 요소들을 200px 너비의 두 개의 열에 배치하세요.

자식 요소들을 150px 너비의 세 개의 열에 배치하세요.

자식 요소들을 세 개의 열에 배치하세요: 첫 번째 열 너비는 100px, 두 번째 열은 150px, 세 번째 열은 200px로 지정하세요.