CSS Grid 생성기

이 도구 소개

CSS Grid 생성기는 열과 행 개수, 간격, 선택적 grid-template 값, 항목 정렬로 그리드 레이아웃을 만들며, 실시간 미리보기와 바로 복사할 수 있는 CSS를 제공합니다.

사용 방법

1. 열과 행의 개수를 설정합니다.
2. 열 간격과 행 간격을 조절합니다.
3. 필요하면 200px 1fr 1fr 같은 사용자 지정 템플릿을 입력합니다.
4. justify-items와 align-items를 고른 뒤 CSS 복사를 누릅니다.

알아두면 좋은 점

• fr 단위는 남는 공간을 나눠 가집니다. 1fr 2fr이면 두 번째 열이 첫 번째 열의 두 배 너비가 됩니다.
• repeat(3, 1fr)은 같은 너비의 열 세 개를 뜻하는 축약형입니다.
• column-gap과 row-gap은 트랙 사이의 간격을 설정합니다.
• Grid는 2차원 레이아웃으로, 행과 열을 함께 제어합니다.
• repeat(auto-fit, minmax(200px, 1fr))을 쓰면 미디어 쿼리 없이 반응형 그리드를 만들 수 있습니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문