CSS Grid 플레이그라운드

CSS 그리드는 요소를 2차원 레이아웃으로 만들어 줍니다. 컨테이너에 display: grid를 설정하고, grid-template-columns와 grid-template-rows로 컬럼과 행 트랙을 정의하면 브라우저가 각 자식 요소를 생성된 셀에 배치합니다. 예를 들어 grid-template-columns: repeat(3, 1fr)은 세 개의 동일한 컬럼을 만들며, 자식 요소는 왼쪽에서 오른쪽으로, 위에서 아래로 배치됩니다. 오래된 float나 flexbox 레이아웃과 달리 그리드는 행과 컬럼을 동시에 배치하므로 하나의 컨테이너 속성으로 두 축을 모두 제어할 수 있습니다.

컨테이너에 display: grid를 추가한 다음 트랙을 설명합니다. 최소한 한 줄이면 됩니다: display: grid; grid-template-columns: 1fr 1fr; — 이렇게 하면 두 개의 동일한 컬럼이 생깁니다. 여기서 grid-template-rows로 명시적 행을, gap으로 간격을, 자식 요소에 grid-column: span 2를 추가하면 여러 셀에 걸치게 만들 수 있습니다. grid 단축 속성은 행, 컬럼, 영역을 하나의 선언으로 결합할 수 있지만, 대부분의 개발자는 가독성을 위해 grid-template-columns, gap, 정렬을 별도로 설정합니다. 이 생성기가 해당 규칙을 자동으로 작성해 드립니다.

각 컬럼과 행 트랙의 크기를 정의합니다. grid-template-columns: 200px 1fr 1fr은 고정 너비 200px의 첫 번째 컬럼과 나머지 공간을 나누는 두 개의 유연한 컬럼을 만듭니다. grid-template-rows: auto 1fr은 콘텐츠 크기의 첫 번째 행과 남은 높이를 채우는 두 번째 행을 설정합니다. 목록의 각 값이 하나의 트랙이며, 값의 개수가 명시적 컬럼이나 행의 수를 결정합니다. 이 생성기는 트랙을 추가하고 편집할 때 두 목록을 모두 작성하며 실시간 미리보기를 업데이트합니다.

fr은 '분수(fraction)' 단위로 남은 공간을 나눕니다. repeat(3, 1fr)은 동일한 너비의 세 컬럼을 만듭니다. repeat(n, value)는 트랙 패턴을 n번 반복하는 단축 표기로, repeat(4, 1fr)은 1fr 1fr 1fr 1fr과 동일합니다. minmax(min, max)는 최솟값 아래로 축소되거나 최댓값을 초과하여 확장되지 않는 트랙을 설정합니다. minmax(150px, 1fr)은 컬럼을 최소 150px로 유지하면서 확장을 허용합니다. 이를 조합하면 — repeat(auto-fit, minmax(150px, 1fr)) — 컨테이너 너비가 변함에 따라 컬럼을 자동으로 추가하고 제거하는 그리드를 만들 수 있습니다.

auto-fit(또는 auto-fill)과 minmax()를 함께 사용하면 그리드가 자동으로 재배열됩니다: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). 각 컬럼은 최소 200px를 유지하며 브라우저가 컨테이너에 맞는 만큼 배치하고, 좁은 화면에서는 컬럼 수를 줄이고 넓은 화면에서는 늘립니다. 이 생성기에서 반응형 모드로 전환하고 최소 셀 너비를 설정한 다음 결과를 복사하세요. 미디어 쿼리 한 줄 없이 모바일에서 데스크톱까지 적응하는 유동적인 카드 그리드를 만드는 가장 간단한 방법입니다.

grid-template-areas는 영역에 이름을 지정하고 레이아웃을 ASCII 아트처럼 그릴 수 있게 해줍니다. 각 자식 요소에 grid-area로 이름을 부여한 다음 grid-template-areas: 'header header' 'sidebar main' 'footer footer'처럼 그리드를 매핑합니다. 이름을 셀에 반복하면 해당 영역이 셀들을 가로지르게 되고, 점(.)은 셀을 비워 둡니다. 헤더, 사이드바, 메인, 푸터와 같은 클래식 페이지 구조를 만드는 가장 가독성 높은 방법입니다 — 템플릿 자체가 레이아웃처럼 보이기 때문입니다. 여기의 Areas 탭은 템플릿과 모든 영역의 grid-area 규칙을 자동으로 작성합니다.

2x2 그리드의 경우 컬럼 두 개와 행 두 개를 설정하세요: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; 그리고 네 개의 아이템을 배치합니다. 3컬럼 그리드의 경우 grid-template-columns: repeat(3, 1fr)을 사용하고 아이템이 필요한 만큼 행으로 흐르도록 합니다. 이 도구에서는 컬럼과 행 수만 설정하면 미리보기가 즉시 업데이트됩니다 — 입력이 필요 없습니다. 생성기는 인접 트랙의 크기가 같을 때 repeat() 단축 표기를 자동으로 처리합니다.

12컬럼 그리드는 Bootstrap과 Foundation에 의해 대중화된 디자인 규약으로, 페이지를 12개의 동일한 컬럼으로 분할합니다. 12를 선택한 이유는 2등분, 3등분, 4등분, 6등분이 모두 깔끔하게 나누어지기 때문입니다. 컴포넌트는 원하는 컬럼 수만큼 차지할 수 있습니다: 절반은 6, 3분의 1은 4, 4분의 1은 3. CSS 그리드로는 한 줄로 재현할 수 있습니다: grid-template-columns: repeat(12, 1fr), 자식 요소에 grid-column: span 4를 사용하여 크기를 조정합니다. 여기서 컬럼을 12로 설정하면 Bootstrap 의존성 없는 순수 CSS 클래식 프레임워크 그리드를 얻을 수 있습니다.

그리드는 2차원입니다 — 행과 컬럼을 동시에 제어합니다 — 반면 flexbox는 1차원으로, 단일 행이나 컬럼을 따라 아이템을 배치합니다. 정렬된 행과 컬럼이 있는 전체 페이지나 카드 레이아웃(대시보드, 갤러리, 페이지 구조)을 만들 때는 그리드를 사용하세요. 내비게이션 바, 툴바, 버튼 행처럼 단일 콘텐츠 스트립에는 flexbox를 사용하세요. 두 가지는 잘 어울립니다: 외부 페이지 구조에는 그리드, 개별 셀 내부에는 flexbox.

Tailwind는 그리드 유틸리티를 제공합니다: grid와 grid-cols-3을 추가하면 세 개의 동일한 컬럼, gap-4는 간격, 자식 요소에 col-span-2 / row-span-2를 추가하면 여러 셀에 걸칩니다. grid-cols-3은 repeat(3, minmax(0, 1fr))로 컴파일됩니다. 반응형 auto-fit 트랙처럼 커스텀한 것은 임의 값을 사용하세요: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. 출력을 Tailwind 탭으로 전환하면 이 생성기가 컨테이너와 모든 아이템에 대한 정확한 유틸리티 클래스를 작성하여 JSX나 HTML 마크업에 바로 붙여넣을 수 있게 해줍니다.

자식 요소에 grid-column과 grid-row를 사용하세요. grid-column: span 2는 아이템을 두 컬럼 너비로 만들고, grid-column: 1 / 3은 1번 라인에서 3번 라인까지 배치합니다(역시 두 컬럼). 수직으로는 grid-row: span 2를 동일하게 적용합니다. Tailwind에서는 col-span-2와 row-span-2를 사용합니다. 이 플레이그라운드에서는 미리보기의 셀을 가로질러 드래그하여 걸치는 아이템을 만들거나, 아이템 패널에서 정확한 시작 위치와 span 값을 입력할 수 있습니다. CSS와 Tailwind 출력 모두 실시간으로 업데이트됩니다.

gap 속성은 트랙 사이에 공간을 추가합니다: gap: 16px는 모든 행과 컬럼 사이에 16px를 넣습니다. 축별로 다르게 설정하려면 gap: 24px 16px(행 간격 다음 컬럼 간격) 형식을 사용하거나 row-gap과 column-gap을 직접 사용하세요. gap은 셀 사이의 공간에만 영향을 미칩니다 — 그리드 외부 가장자리에는 패딩이 추가되지 않으며, 이것이 자주 혼동을 일으키는 부분입니다. 여기서 row-gap과 column-gap 컨트롤을 사용하세요 — 균일한 간격을 위해 연결하거나 각 축을 독립적으로 미세 조정하기 위해 연결을 해제할 수 있습니다.

완전히 무료이며 가입이 필요 없고 설치할 것도 없습니다. Layoutit Grid는 좋은 출발점이지만 Tailwind 출력이 없고 grid-area 규칙을 복사하려면 별도의 탭을 거쳐야 합니다. Sarah Drasner의 CSS Grid Generator는 아이템 수준의 컨트롤이나 공유 링크가 없는 최소한의 교육용 도구입니다. UtiloKit은 Tailwind CSS 출력, 이름 지정 템플릿 영역, 반응형 auto-fit 모드, 공유 링크, 인터랙티브 드래그-투-span 아이템 편집기를 모두 한 곳에서 제공합니다. 모든 것이 브라우저 로컬에서 생성되므로 레이아웃이 업로드되지 않습니다.

예, 사용 가능합니다. 이 도구는 완전히 반응형이며 iPhone의 Safari와 Android의 Chrome을 포함한 모든 최신 모바일 브라우저에서 작동합니다. 이동 중에 그리드 레이아웃을 만들고, CSS 또는 Tailwind 출력을 복사하여 프로젝트에 붙여넣으세요. 모든 것이 클라이언트 사이드에서 실행되므로 업로드, 계정, 대기 시간이 없습니다. 페이지가 로드된 후에는 오프라인에서도 작동합니다. 드래그-투-span 아이템 편집기는 터치 친화적으로 설계되어 마우스 없이도 복잡한 그리드 레이아웃을 만들 수 있습니다.