CSS Grid 생성기

CSS Grid 레이아웃을 시각적으로 만들고 깔끔한 CSS와 HTML을 복사하세요

미리보기

출력

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

옵션

열 간격16px

행 간격16px

선택한 항목

미리보기에서 항목을 선택하면 차지할 열과 행 수를 설정할 수 있습니다.

항목 가로 정렬

항목 세로 정렬

고급

트랙 가로 정렬

트랙 세로 정렬

최소 높이

0이면 min-height를 설정하지 않습니다. fr 행은 채울 높이가 필요합니다.

편집하는 동안 미리보기와 코드가 업데이트됩니다.

CSS Flexbox 생성기Flexbox 레이아웃을 시각적으로 만들고 CSS, HTML, Tailwind를 복사하세요 그라데이션 생성기엄선한 CSS 그라데이션을 둘러보거나 선형·방사형·원뿔형 그라데이션 만들기 CSS 뷰티파이어 & 미니파이어CSS 코드 포맷, 최적화 및 압축 HTML CSS JS 플레이그라운드프론트엔드 코드를 작성하고 브라우저에서 안전하게 실행하며 디버그하세요.

CSS Grid 생성기란?

CSS Grid 레이아웃을 시각적으로 만드는 빌더입니다. 열과 행 크기를 fr, px, %, auto, minmax() 또는 검증된 사용자 지정 값으로 정하고, 이름 있는 영역을 칠하거나 auto-fit 반응형 카드 그리드를 만들 수 있습니다. 미리보기는 생성된 코드와 같은 선언으로 동작하는 실제 CSS Grid 컨테이너이므로 보이는 그대로 복사할 수 있습니다.

사용 방법

1.트랙, 이름 있는 영역, 반응형 중 모드를 고르거나 프리셋을 불러옵니다.
2.열과 행 크기, 간격, 정렬을 설정합니다.
3.트랙 모드에서는 미리보기의 항목을 클릭해 차지할 열이나 행 수를 정합니다.
4.이름 있는 영역 모드에서는 이름을 입력하고 셀을 클릭해 각 영역을 칠합니다.
5.CSS 또는 단독 HTML 페이지를 복사하거나 다운로드합니다.

이름 있는 영역과 검증

이름 있는 영역은 각각 빈틈없는 직사각형이어야 하며, 그렇지 않으면 브라우저가 grid-template-areas 선언 전체를 무시합니다. 이 도구는 어떤 영역이 규칙을 어겼는지 설명하고, 고칠 때까지 미리보기와 코드에 마지막으로 유효했던 레이아웃을 유지합니다. 사용자 지정 트랙 크기는 적용 전에 검사합니다.

제한 사항

최대 12열, 12행, 항목 48개까지 지원합니다. 사용자 지정 크기에는 길이, 백분율, fr, auto, min-content, max-content, minmax(), fit-content()를 쓸 수 있으며 calc(), var(), 라인 이름, 단일 트랙 안의 repeat()는 사용할 수 없습니다. 레이아웃은 이 브라우저에만 저장됩니다.

CSS Grid 생성기

레이아웃

열 크기

행 크기

미리보기

출력

옵션

선택한 항목

관련 도구