본문으로 건너뛰기

CSS 그리드 생성기

CSS Grid 생성 무료 온라인 도구. 시각적 편집기로 행·열·갭을 설정하고 레이아웃 코드 자동 생성. 코드 복사 가능. 브라우저 처리.

CSS 그리드 생성기는 그리드 레이아웃을 시각적으로 설계하는 무료 온라인 도구입니다. 행/열 수, gap, 셀 배치를 드래그로 설정하고 CSS Grid 코드를 자동 생성합니다. 실시간 미리보기 지원. 브라우저 처리, 서버 미전송, 무료.

1
2
3
4
5
6
7
8
9
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; justify-items: stretch; align-items: stretch; }
HTML 코드
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
lock 파일이 서버로 전송되지 않습니다

CSS 그리드 생성기 어떻게 사용하나요?

  1. 행(rows)과 열(columns) 수를 설정합니다.
  2. 셀을 드래그하여 영역을 병합하거나 배치를 조정합니다.
  3. 생성된 CSS Grid 코드를 복사하여 프로젝트에 사용합니다.

CSS 그리드 생성기 자주 묻는 질문

CSS Grid와 Flexbox의 차이는 무엇인가요?

CSS Grid는 2차원(행+열) 레이아웃에, Flexbox는 1차원(행 또는 열) 레이아웃에 적합합니다. 복잡한 페이지 레이아웃에는 Grid가 더 적합합니다.

fr 단위는 무엇인가요?

fr(fraction)은 CSS Grid에서 사용하는 비율 단위입니다. 예를 들어 1fr 2fr은 공간을 1:2 비율로 나눕니다. 반응형 레이아웃에 매우 유용합니다.