CSS 그리드 컨테이너의 역할과 기본 사용법

CSS 그리드 컨테이너란?

CSS에서 그리드 컨테이너(Grid Container)는 내부에 그리드 아이템(Grid Item)들을 포함하는 부모 요소입니다. 이 아이템들은 미리 정의된 행(row)과 열(column) 구조 안에 자동으로 배치되므로, 복잡한 레이아웃도 적은 코드로 깔끔하게 구성할 수 있습니다.

그리드 컨테이너를 만들려면 부모 요소에 display: grid;를 선언하고, grid-template-columns 속성으로 열의 개수와 너비를 지정하면 됩니다.

예제: 2열 그리드 만들기

<!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>

코드 설명

display: grid; – 해당 요소를 그리드 컨테이너로 지정합니다.
grid-template-columns: auto auto; – 두 개의 열을 정의하며, 각 열의 너비는 콘텐츠에 맞춰 자동 조절됩니다.
grid-gap: 20px; – 그리드 아이템 사이의 행·열 간격을 20px로 설정합니다. 최신 CSS에서는 gap 속성 사용이 권장됩니다.
padding: 20px; – 컨테이너의 안쪽 여백을 지정합니다.

위 예제에서는 6개의 자식 div 요소가 파란색 배경의 컨테이너 안에서 2열 그리드에 순서대로 배치되며, 각 아이템은 주황색 배경과 회색 테두리로 강조됩니다. 이처럼 그리드 컨테이너를 활용하면 게임 보드, 이미지 갤러리, 카드 목록 등 다양한 격자형 레이아웃을 손쉽게 구현할 수 있습니다.