CSS 그리드 생성기

CSS Grid 레이아웃은 요소를 행과 열에 동시에 배치할 수 있는 강력한 2차원 레이아웃 시스템입니다. 한 번에 한 방향만 처리하는 Flexbox와 달리 Grid는 두 축을 모두 완전히 제어할 수 있습니다. 주요 속성으로는 grid-template-columns(열 트랙 정의), grid-template-rows(행 트랙 정의), gap(간격 제어), grid-area(명명된 영역 내 항목 배치)가 있습니다.

Columns 슬라이더로 열 수(1~12)를, Rows 슬라이더로 행 수(1~12)를 설정합니다. Gap 슬라이더로 셀 간 간격(0~32px)을 조정합니다. 미리보기 영역에 번호가 매겨진 셀의 실시간 그리드가 표시됩니다. 만족하면 생성된 CSS 코드를 복사하여 프로젝트에 붙여넣습니다.

grid-template-columns와 grid-template-rows는 트랙 크기를 정의합니다. repeat() 함수는 동일한 트랙을 생성하며, 예를 들어 repeat(3, 1fr)은 세 개의 동일한 열을 만듭니다. fr 단위는 사용 가능한 공간을 비례적으로 분배합니다. gap은 행과 열 사이의 간격을 설정합니다. 필요에 따라 row-gap과 column-gap에 다른 값을 설정할 수 있습니다.

홀리 그레일 레이아웃: 3열 헤더, 사이드바가 있는 메인 콘텐츠. 대시보드 카드: repeat(auto-fill, minmax(250px, 1fr))로 반응형 카드 그리드 생성. 전체 너비 히어로와 하단 콘텐츠: 모든 행에 걸치는 1열. 매거진 레이아웃: grid-column과 grid-row로 다양한 셀 크기의 혼합 스팬 구현.

auto-fill 또는 auto-fit과 minmax()를 결합하여 미디어 쿼리 없이 유동적인 반응형 그리드를 만들 수 있습니다. clamp()와 결합하여 유연한 크기 조정도 가능합니다. minmax(200px, 1fr)로 최소 너비를 설정하여 항목이 너무 작아지지 않도록 합니다. 미디어 쿼리를 사용하여 브레이크포인트에서 열 수를 변경할 수도 있습니다. 컨테이너 쿼리를 사용하면 컴포넌트 수준의 반응형이 가능합니다.