CSS Grid 레이아웃 생성기

CSS Grid는 2D 레이아웃을 위한 강력한 도구입니다. 신문 레이아웃부터 복잡한 대시보드까지, Grid로 모든 것을 만들 수 있습니다.

Grid vs Flexbox

• Grid: 2D 레이아웃 (행과 열을 동시에 제어)
• Flexbox: 1D 레이아웃 (행 또는 열 중 하나)
• 두 가지를 함께 사용하는 것이 가장 효과적

핵심 Grid 속성

• grid-template-columns: 열 정의 (repeat(3, 1fr))
• grid-template-rows: 행 정의
• gap: 행/열 간격
• grid-column/row: 아이템이 차지할 범위
• grid-area: 이름 있는 그리드 영역

fr 단위 이해하기

fr은 사용 가능한 공간의 분수(fraction)를 나타냅니다. grid-template-columns: 1fr 2fr 1fr은 25%, 50%, 25%로 나눕니다.

반응형 Grid

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

이 패턴은 미디어 쿼리 없이 자동으로 반응형 그리드를 만듭니다.