CSS 그리드 생성

CSS Grid Builder

이름이 붙은 영역으로 그리드를 시각적으로 배치하고 grid-template CSS를 만듭니다.

칸을 눌러 이름 붙인 영역을 격자에 칠하고, 규격의 직사각형 규칙에 맞는지 확인한 뒤 `grid-template-areas`를 냅니다. 원하면 줄 번호로도 냅니다. 이 확인이 중요한 이유는, 잘못된 영역 목록은 아무 데도 오류를 남기지 않고 조용히 버려지기 때문입니다.

🔒 브라우저 안에서만 처리cssgridlayoutgenerator

시작 틀

열행열 간격px행 간격px

격자

영역 이름

크기 칸에는 1fr·240px·auto·minmax(200px, 1fr)를 쓸 수 있습니다.

칸을 누르면 아래 이름의 영역이 됩니다. 한 칸을 누른 뒤 다른 칸을 누르면 그 사이가 한 영역으로 채워집니다. 같은 이름의 칸을 다시 누르면 비웁니다.

CSS

선택자

grid-template-areas 쓰기끄면 grid-column / grid-row 줄 번호로 씁니다.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

미리보기

header

sidebar

main

footer

규칙 하나만 기억하면 됩니다

이름 붙인 영역은 반드시 직사각형이어야 합니다 (CSS Grid Level 2 §7.3.1). L자 모양을 만들면 오류 없이 grid-template-areas 전체가 무효가 되고, 그래서 이 도구는 CSS를 만들기 전에 그 점을 먼저 알립니다. 같은 크기가 세 번 이상 반복되면 repeat()로 줄여 씁니다.

한 줄 배치라면 플렉스박스 실습장이 더 단순합니다.

사용 방법

틀에서 시작합니다
헤더·사이드바·본문·푸터, 카드 한 줄, 대시보드, 가운데 정렬한 본문이 있습니다. 아니면 빈 격자에서 직접 만들면 됩니다.
영역 이름을 쓰고 칸을 누릅니다
이름을 입력하고 칸을 누릅니다. 한 칸을 누른 뒤 다른 칸을 누르면 그 사이 직사각형이 채워지고, 같은 이름의 칸을 다시 누르면 비워집니다.
트랙 크기를 정합니다
위와 왼쪽의 칸에 `1fr`, `240px`, `auto`, `minmax(200px, 1fr)`를 쓸 수 있습니다. 같은 트랙이 셋 이상이면 `repeat()`로 씁니다.

자주 묻는 질문

L자 모양 영역이 왜 안 되나요?

이름 붙인 영역은 반드시 직사각형이어야 하기 때문입니다. CSS Grid Level 2 §7.3.1입니다. 아니면 `grid-template-areas` 선언 전체가 무효가 되고 브라우저는 오류 없이 버립니다. 이 도구가 CSS를 만들기 전에 알려 주는 것이 받을 수 있는 유일한 경고입니다.