CSS 그리드 생성기

행, 열, 간격, 정렬을 커스터마이즈하여 CSS Grid 레이아웃을 시각적으로 생성합니다. 트랙 크기를 편집하고 바로 사용 가능한 CSS 코드를 복사하세요.

1
2
3
4
5
6
7
8
9

그리드 속성

#f0f0f0

트랙 크기

C1
C2
C3
R1
R2
R3

1fr, 2fr, 100px, auto, minmax(100px, 1fr), repeat(3, 1fr) 등의 값을 사용하세요

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
}
모든 레이아웃 생성은 브라우저에서 처리됩니다. 서버로 전송되는 데이터가 없습니다.

How to Use This Tool

  1. 1

    Set grid dimensions

    Choose the number of columns (1-8) and rows (1-8) for your grid layout.

  2. 2

    Customize track sizes

    Edit individual column and row sizes using CSS values like 1fr, 200px, auto, or minmax().

  3. 3

    Adjust alignment & gaps

    Use justify-items, align-items, justify-content, and align-content to control alignment. Set column and row gaps.

  4. 4

    Copy the CSS

    The generated CSS updates in real-time. Click Copy to copy the complete grid CSS to your clipboard.

Frequently Asked Questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex web layouts using rows and columns. It is ideal for page layouts, card grids, and dashboard designs.
What does fr unit mean?
The fr (fractional) unit represents a fraction of the available space in the grid container. 1fr means one equal share. 2fr takes twice the space of 1fr.
When should I use Grid vs Flexbox?
Use CSS Grid for two-dimensional layouts (both rows and columns). Use Flexbox for one-dimensional layouts (a single row or column). They can also be combined.
Is my data secure?
Yes. All layout generation happens entirely in your browser using JavaScript. No data is sent to any server.