CSS Grid 레이아웃 빌더
시각적 편집기를 사용하여 CSS Grid 레이아웃을 디자인하세요. fr, px 또는 auto 단위를 사용하여 열과 행을 설정하고, 간격을 구성하고, 셀을 확장하고, 깔끔한 CSS를 내보내세요.
미리보기
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
Grid 설정
px
px
CSS 코드
복사됨!
CSS Grid 빌더란 무엇인가요?
CSS Grid 빌더는 CSS Grid를 사용하여 2차원 레이아웃을 디자인하는 시각적 도구입니다. 열, 행, 간격을 정의한 다음 셀을 클릭하여 스팬 값을 설정합니다. 이 도구는 프로젝트에 복사할 수 있는 해당 CSS 코드를 생성합니다. 레이아웃을 배우거나 프로토타입을 제작하는 동안 Grid 구문을 암기할 필요가 없습니다.
CSS Grid 레이아웃을 구축하는 방법
- 열 정의 — fr, px 또는 auto를 사용하여 열 정의를 입력합니다 (예:
1fr 1fr 1fr) - 행 정의 — 같은 방법으로 행 정의를 입력합니다.
- 간격 설정 — 열 및 행 간격 값을 픽셀 단위로 조정합니다.
- 적용 클릭 — 미리보기 Grid가 업데이트되어 레이아웃을 보여줍니다.
- 셀 스팬 — 셀을 클릭하고 열/행 스팬 값을 설정합니다.
- CSS 복사 — 복사 버튼을 클릭하여 생성된 코드를 가져옵니다.
이 CSS Grid 빌더를 사용해야 하는 이유
- 시각적 피드백 — Grid 레이아웃 업데이트를 실시간으로 확인하세요.
- 유연한 단위 — 열 및 행에 fr, px, auto 또는 유효한 CSS 길이를 사용하세요.
- 셀 스패닝 — 셀을 클릭하여 여러 열 또는 행으로 확장합니다.
- 깔끔한 CSS — 생성된 코드는 프로덕션 준비가 된 표준 Grid 속성을 사용합니다.
- 계정 불필요 — 무료이며 브라우저에서 완전히 작동합니다.
FreeToolbox vs 다른 Grid 생성기
| 기능 | FreeToolbox | CSS Grid Generator | Layoutit |
|---|---|---|---|
| 셀 스패닝 | 예 | 예 | 예 |
| 사용자 정의 단위 | fr, px, auto | fr, px | fr, px, % |
| 실시간 미리보기 | 예 | 예 | 예 |
| 광고 | 최소 | 없음 | 보통 |
| 다크 테마 | 예 | 아니요 | 아니요 |
자주 묻는 질문
열과 행에 어떤 단위를 사용할 수 있나요?
유효한 CSS Grid 트랙 값을 사용할 수 있습니다: fr (분수 단위), px (픽셀), auto, 백분율, minmax() 등. 예를 들어: 1fr 200px auto.
셀이 여러 열에 걸쳐 확장되도록 하려면 어떻게 해야 하나요?
미리보기에서 셀을 클릭하여 선택한 다음 아래 패널에서 열 스팬 값을 설정합니다. '스팬 설정'을 클릭하여 적용합니다.
명명된 Grid 영역을 만들 수 있나요?
이 도구는 스팬 구문을 사용하는 트랙 기반 Grid 정의에 중점을 둡니다. 명명된 grid-template-areas의 경우 생성된 CSS에 수동으로 추가해야 합니다.
스팬이 겹치면 어떻게 되나요?
브라우저의 Grid 자동 배치 알고리즘은 겹치는 스팬을 처리합니다. 일부 셀의 위치가 변경될 수 있습니다. 레이아웃이 예상치 않게 보이면 스팬을 재설정하십시오.
이 도구는 무료인가요?
예, 제한이나 등록 없이 완전 무료입니다.