CSS Grid Generator

Build CSS Grid layouts visually.

grid-template-columns

grid-template-rows

column-gap

row-gap

justify-items

align-items

justify-content

항목 수: 6

미리보기

생성된 CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

이 도구 소개

CSS 그리드 레이아웃 생성기는 grid-template-columns, grid-template-rows, 간격, 정렬 설정을 조정하여 2차원 그리드 레이아웃을 시각적으로 설계할 수 있게 해줍니다. 라이브 미리보기로 코드를 작성하기 전에 결과를 확인할 수 있습니다.

CSS Grid는 행과 열을 동시에 처리하는 2차원 레이아웃 시스템입니다. 단방향 레이아웃을 처리하는 Flexbox를 보완합니다. 이 도구는 바로 사용할 수 있는 깔끔한 CSS를 생성합니다.

사용 방법

grid-template-columns를 설정하여 열 구조를 정의하세요. 일반 패턴은 프리셋 버튼을 사용하세요.
grid-template-rows를 설정하세요 (대부분의 레이아웃은 auto로 두세요).
간격을 위해 column-gap과 row-gap을 조정하세요.
justify-items와 align-items로 셀 내 항목 배치를 제어하세요.
슬라이더로 항목 수를 변경하여 그리드 반응을 확인하세요.
복사 버튼을 눌러 생성된 CSS를 복사하세요.

활용 사례

프론트엔드 개발자들이 페이지 레이아웃, 대시보드 구조, 이미지 갤러리에 CSS Grid를 사용합니다. 디자이너들이 개발자와 공유할 그리드 명세를 정확한 CSS로 내보냅니다. CSS 학습자들이 그리드 속성, 특히 justify-items vs justify-content의 차이를 시각적으로 이해하는 데 사용합니다.

자주 묻는 질문

1fr은 무엇을 의미하나요? — fr은 분수 단위입니다. 1fr은 사용 가능한 공간의 한 부분을 의미합니다. repeat(3, 1fr)은 세 개의 동일한 열을 만듭니다.
Grid와 Flexbox 중 언제 무엇을 써야 하나요? — 2차원 레이아웃(행과 열)에는 Grid를 사용하세요. 단일 방향으로 항목을 배치할 때는 Flexbox를 사용하세요.
CSS Grid는 모든 브라우저에서 지원되나요? — 네. CSS Grid는 2017년부터 모든 최신 브라우저에서 완전히 지원됩니다.