CSS Grid로 바둑판 배열 만들기

2차원 그리드 레이아웃의 끝판왕

대시보드 위젯, 이미지 갤러리처럼 가로와 세로(2차원) 차원을 바둑판 모양으로 통제하여 지능적인 분할 정렬을 배치할 때 Grid는 필수입니다. Tailwind의 grid와 grid-cols-N은 복잡한 CSS Grid 문법을 간단한 유틸리티 선언 하나로 해소해 줍니다.

💡 실무 지침: gap-4 유틸리티 권장

자식 요소들끼리 떼어놓기 위해 일일이 margin-right 나 margin-bottom을 부여하지 마세요. 부모 컨테이너에 gap-4(16px), gap-6(24px) 처럼 간격 유틸리티를 부여하면 복잡한 반응형 상황에서도 마진 겹침 현상 없이 깔끔하게 여백 정렬이 정합됩니다.

클래스 규칙	지정된 역할	대표적인 사용 예시
`grid-cols-{N}`	바둑판 가로 열의 개수 분할	`grid-cols-2` (반반 분할), `grid-cols-4` (4분할)
`col-span-{N}`	해당 아이템이 독점할 칸 개수 지정	`col-span-2` (2개 열의 너비를 병합하여 합침)
`row-span-{N}`	해당 아이템이 세로로 독점할 줄 수 지정	`row-span-2` (상하 2칸의 세로 공간 합침)
`gap-{N}`	그리드 아이템 전체 상하좌우 사이 간격 설정	`gap-4` (16px), `gap-x-8` (좌우만 32px 간격)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid Playground</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center">

  <div class="max-w-3xl w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4">
      <h2 class="text-2xl font-extrabold text-white">Dynamic Grid Playground</h2>
      <p class="text-sm text-slate-400 mt-1">버튼을 클릭하여 가로 칸(Column) 분할 구조를 실시간 스위칭해 보세요!</p>
    </div>

    <!-- Grid Box Container -->
    <div id="grid-container" class="grid grid-cols-2 gap-4 bg-slate-950 p-6 rounded-xl transition-all duration-500">
      <div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 1</div>
      <div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 2</div>
      <div class="bg-teal-500 text-white font-bold h-20 rounded-xl col-span-2 flex items-center justify-center shadow-lg border border-teal-400/30">
        Card 3 (col-span-2)
      </div>
      <div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 4</div>
      <div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 5</div>
    </div>

    <!-- Control Buttons -->
    <div class="flex gap-4">
      <button onclick="changeGrid(2)" class="flex-1 bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg text-sm transition-all">
        2 Columns (grid-cols-2)
      </button>
      <button onclick="changeGrid(3)" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-lg text-sm transition-all shadow-md shadow-indigo-600/30">
        3 Columns (grid-cols-3)
      </button>
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview

2차원 그리드 레이아웃의 끝판왕

💡 실무 지침: gap-4 유틸리티 권장

클래스 규칙	지정된 역할	대표적인 사용 예시
`grid-cols-{N}`	바둑판 가로 열의 개수 분할	`grid-cols-2` (반반 분할), `grid-cols-4` (4분할)
`col-span-{N}`	해당 아이템이 독점할 칸 개수 지정	`col-span-2` (2개 열의 너비를 병합하여 합침)
`row-span-{N}`	해당 아이템이 세로로 독점할 줄 수 지정	`row-span-2` (상하 2칸의 세로 공간 합침)
`gap-{N}`	그리드 아이템 전체 상하좌우 사이 간격 설정	`gap-4` (16px), `gap-x-8` (좌우만 32px 간격)