CSS 그리드 생성기
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파일이 서버로 전송되지 않습니다
Ctrl+D 를 눌러 이 페이지를 즐겨찾기에 추가하세요
CSS 그리드 생성기는 그리드 레이아웃을 시각적으로 설계하는 무료 온라인 도구입니다. 행/열 수, gap, 셀 배치를 드래그로 설정하고 CSS Grid 코드를 자동 생성합니다. 실시간 미리보기 지원. 브라우저 처리, 서버 미전송, 무료.