CSS 그리드 레이아웃(Grid Layout)에서 각 열(column)의 너비를 정의하려면 grid-template-columns 속성을 사용합니다. 이 속성에 원하는 너비 값들을 공백으로 구분해 나열하면, 나열된 순서대로 첫 번째 열부터 차례로 너비가 적용됩니다.
기본 문법
grid-template-columns 속성은 아래와 같이 열의 개수만큼 너비 값을 나열하는 형태로 작성합니다.
grid-template-columns: 120px 80px 50px;
위 코드는 첫 번째 열은 120px, 두 번째 열은 80px, 세 번째 열은 50px로 지정한다는 의미입니다.
예제
다음 코드를 실행하면 세 개의 서로 다른 너비를 가진 열로 구성된 그리드 레이아웃을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: gray;
grid-template-columns: 120px 80px 50px;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: yellow;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</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>
코드 설명
- display: grid; — 해당 요소를 그리드 컨테이너로 지정합니다.
- grid-template-columns: 120px 80px 50px; — 세 개의 열을 각각 120px, 80px, 50px 너비로 정의합니다.
- grid-gap: 20px; — 열과 행 사이의 간격을 20px로 설정합니다.
이 예제에서는 6개의 자식 요소(<div>)가 3개의 열에 순서대로 배치되므로, 화면에는 2행 3열 구조의 그리드가 만들어집니다. 즉, 1~3번 요소는 첫 번째 행에, 4~6번 요소는 두 번째 행에 배치됩니다.
함께 알아두면 좋은 너비 단위
grid-template-columns 속성에는 픽셀(px) 외에도 다양한 값을 사용할 수 있으며, 상황에 따라 적절히 조합하면 더 유연한 반응형 레이아웃을 만들 수 있습니다.
- fr (fraction) — 남은 공간을 비율로 분배합니다. 예:
1fr 2fr 1fr - % — 컨테이너 전체 너비를 기준으로 백분율로 지정합니다.
- auto — 콘텐츠 크기에 맞춰 열 너비가 자동으로 조절됩니다.
- repeat() — 반복되는 패턴을 간결하게 작성합니다. 예:
repeat(3, 100px) - minmax() — 최솟값과 최댓값 범위를 지정해 유동적인 너비를 설정합니다. 예:
minmax(100px, 1fr)
고정 픽셀 값은 레이아웃이 일정하게 유지되어야 할 때 유용하고, fr 단위는 화면 크기에 따라 유연하게 늘어나거나 줄어드는 반응형 디자인에 적합합니다.