CSS Grid Generator

CSS Grid 레이아웃을 시각적으로 디자인해요. 칼럼, 행, 갭, 아이템 배치를 정의하고 실시간 미리보기를 확인해요.

작동 방식: 칼럼과 행으로 그리드 구조를 정의해요. 트랙 크기, 갭, 아이템 배치를 조정해요. 레이아웃이 완성되면 생성된 CSS를 복사해요.

3
2
8px
8px
11fr
21fr
31fr
11fr
21fr
아이템 1
아이템 2
아이템 3
아이템 4
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

CSS Grid란?

CSS Grid Layout은 2차원 레이아웃 시스템으로, 행과 칼럼을 동시에 사용해 복잡한 웹 레이아웃을 만들어요. Flexbox는 한 방향에서만 작동하지만, Grid는 두 축 모두에 대해 완전한 제어를 제공해요. 페이지 레이아웃, 대시보드, 이미지 갤러리에 완벽해요.

Grid Generator 사용 방법

칼럼과 행의 개수를 설정해요. fr(분수), px, auto 단위로 트랙 크기를 조정해요. 갭 컨트롤을 사용해 셀 간의 간격을 추가해요. 그리드 아이템을 클릭해 여러 칼럼이나 행에 걸치게 해요. 생성된 CSS는 실시간으로 업데이트돼요 — 완성되면 복사하면 돼요.

Grid Template Columns과 Rows

grid-template-columns과 grid-template-rows 속성은 트랙 크기를 정의해요. fr 단위는 사용 가능한 공간을 비례적으로 분배해요 — 1fr 2fr은 두 번째 칼럼에 2배의 너비를 줘요. auto로 콘텐츠 기반 크기 조정, minmax()로 반응형 범위, repeat()로 반복 패턴을 사용해요.

일반적인 CSS Grid 패턴

  • 12칼럼 레이아웃: repeat(12, 1fr)로 최대 유연성 확보
  • 대시보드: 사이드바(250px) + 메인(1fr)에 헤더와 푸터는 전체 너비 차지
  • 사진 갤러리: auto-fill과 minmax(200px, 1fr)로 반응형 칼럼
  • 블로그 레이아웃: 1fr 3fr로 사이드바와 콘텐츠
  • Holy grail: grid-template-areas로 헤더, 3칼럼 본문, 푸터 배치
  • 카드 그리드: auto-fit과 minmax로 반응형 동일 카드