CSS에서 grid-template-columns 속성은 그리드(Grid) 레이아웃의 열(column) 개수와 각 열의 너비를 정의하는 데 사용됩니다. 공백으로 구분된 값 목록을 작성하면 값의 개수만큼 열이 생성되며, 각 값이 해당 열의 크기를 결정합니다.
주요 값 정리
- auto – 콘텐츠 크기에 따라 열 너비가 자동으로 조절됩니다.
- px, %, em – 고정된 크기로 열을 지정합니다.
- fr – 남은 공간을 비율에 따라 배분합니다.
- repeat() – 동일한 패턴의 열을 반복 정의할 때 사용합니다.
예제
다음 코드를 실행하면 grid-template-columns 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: blue;
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;
}
</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;를 지정하여 두 개의 열을 생성했습니다. 각 열의 너비는 콘텐츠에 맞춰 자동으로 조절되며, 6개의 자식 요소는 왼쪽에서 오른쪽으로 순서대로 배치되어 2열 × 3행 구조를 형성합니다. 또한 grid-gap: 20px; 설정 덕분에 항목 사이에 일정한 간격이 유지됩니다.