CSS Grid 생성기

생성되는 컨테이너

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): 사용 가능한 너비를 균등하게 나누는 3개 열. 1fr은 남은 공간의 한 분획이며, minmax(0, 1fr)은 열이 콘텐츠 크기보다 작게 줄어들 수 있게 합니다.
• gap: 각 트랙 사이의 간격.
• 미디어 쿼리가 repeat(auto-fit, minmax(220px, 1fr))로 전환되며, 각각 220px 이상인 열을 가능한 한 많이 만듭니다. 중단점은 열 개수에 최소 너비를 곱한 값(120px 하한)이므로 작은 화면에서는 열이 압축되지 않고 다음 행으로 넘어갑니다.

fr 단위

fr은 “남은 공간의 한 분획”을 뜻합니다. 고정 크기 트랙을 뺀 뒤 남은 공간을 fr 단위 총합으로 나눕니다.

grid-template-columns: 200px 1fr 2fr;

1000px 컨테이너에서 첫 번째 열은 200px을 차지하고 나머지 800px이 1:2로 나뉘어 267px과 533px이 됩니다.

auto-fill vs. auto-fit

• auto-fill: 아이템이 충분하지 않을 때 빈 자리 트랙을 만듭니다.
• auto-fit: 빈 트랙을 0으로 접어 나머지 아이템이 늘어나 행을 채웁니다.

반응형 대체는 카드 그리드에 맞는 auto-fit을 사용하므로 행이 항상 가득 차 보입니다.

다른 너비의 열

생성기는 동일한 열을 출력합니다. 크기를 섞으려면 결과를 수정하세요. grid-template-columns: 200px 1fr 2fr;는 고정 사이드바와 1:2 비율의 유연한 두 열을 만듭니다. 이름 있는 영역(grid-template-areas)이나 명시적 배치(grid-column: 1 / 3)는 생성된 컨테이너 위에 직접 추가하세요.

Grid vs. Flexbox

• Grid: 트랙으로 구성된 명시적 2D 레이아웃. 행과 열 구조를 가진 레이아웃(페이지 골격, 갤러리, 대시보드)에 적합합니다.
• Flexbox: 단일 축을 따른 1D 정렬. 아이템이 자연스럽게 흐르는 곳(내비게이션 바, 버튼 줄)에 적합합니다.

실제 레이아웃은 보통 둘을 조합합니다. 페이지 골격에는 Grid, 컴포넌트 내부에는 Flexbox입니다.

흔한 실수

• 자식에 min-width: 0을 빼먹기: 그리드 아이템은 기본적으로 콘텐츠의 최소 너비를 사용하므로 fr 열이 가장 긴 단어보다 작아질 수 없습니다. 자식에 min-width: 0을 지정해 줄어들게 하세요.
• display: grid 없이 중첩하기: 그리드의 자식은 직접 선언하지 않는 한 그리드가 아닙니다.