CSS 그리드 레이아웃(Grid Layout)에서 열의 개수와 각 열의 너비를 지정하려면 grid-template-columns 속성을 사용합니다. 이 속성에 값을 나열하면, 값의 개수만큼 열이 생성되고 각 값은 해당 열의 크기를 결정합니다.
예를 들어 grid-template-columns: auto auto;처럼 두 개의 값을 작성하면 두 개의 열이 만들어지며, auto 키워드는 콘텐츠에 맞춰 열 너비가 자동으로 조정됩니다.
예제
다음 예제는 그리드 컨테이너에 두 개의 열을 정의하고, 첫 번째 요소가 여러 행에 걸쳐 배치되도록 구성한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: orange;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
.ele1 {
grid-row-start: 1;
grid-row-end: 6;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class = "container">
<div class = "ele1">1</div>
<div class = "ele2">2</div>
<div class = "ele3">3</div>
<div class = "ele4">4</div>
<div class = "ele5">5</div>
<div class = "ele6">6</div>
</div>
</body>
</html>코드 설명
.container 클래스에 display: grid;를 선언하여 해당 요소를 그리드 컨테이너로 만들고, grid-template-columns: auto auto;로 두 개의 열을 정의했습니다. 또한 grid-gap: 20px;를 통해 항목 사이에 20픽셀의 간격을 부여했습니다.
첫 번째 자식 요소인 .ele1에는 grid-row-start: 1;과 grid-row-end: 6;가 적용되어, 1번째 행 시작선부터 6번째 행 끝선까지 세로로 길게 확장되어 배치됩니다. 나머지 요소들은 남은 공간에 순서대로 자동 배치됩니다.
참고: 다양한 열 크기 단위
grid-template-columns 속성에는 auto 외에도 픽셀(200px), 백분율(50%), 가변 단위(1fr) 등 다양한 값을 사용할 수 있습니다. 특히 fr 단위를 활용하면 화면 크기에 따라 유연하게 늘어나거나 줄어드는 반응형 레이아웃을 쉽게 구현할 수 있습니다.