CSS Grid 생성기
CSS Grid 레이아웃을 시각적으로 디자인하세요. 열, 행, 간격을 설정한 다음 셀에 영역 이름을 입력하여 grid-template-areas를 만듭니다. 실시간 미리 보기와 복사 가능한 CSS 및 HTML을 제공합니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
grid-template-areas 선언은 존재하기만 하면 CSS에서 가장 가독성 높은 코드 중 하나지만, 손으로 만들려면 따옴표로 감싼 문자열을 세고 행 길이를 맞춰야 하며, 하나의 셀만 불일치해도 전체 레이아웃이 조용히 무너집니다. 이 생성기는 그 과정을 직접 조작으로 바꿔줍니다. 열과 행 개수를 설정하고 실시간 그리드의 셀에 이름을 입력하면, 일치하는 이름이 자동으로 하나의 이름 지정 영역으로 병합됩니다.
내부적으로, 비워 둔 셀은 모두 생성된 grid-template-areas 문자열에서 점으로 변환되고, 이름을 입력한 셀은 모두 해당 이름의 직사각형 일부가 됩니다. CSS는 이름 지정 영역이 하나의 깔끔한 직사각형 블록만 차지하도록 허용하므로, 이 도구는 입력하는 대로 검증하여 이름이 아직 유효한 직사각형을 형성하지 못하면 정확히 알려줍니다. 브라우저가 거부할 CSS를 조용히 생성하는 대신 말이죠.
column-gap과 row-gap의 기본값은 8px이며, 값이 같으면 하나의 gap 줄로 결합됩니다. 실시간 미리 보기 그리드는 항상 grid-template-columns 및 grid-template-rows 트랙을 반영합니다. 여기에는 성배 레이아웃의 200px 측면 레일과 같은 프리셋의 고정 픽셀 열도 포함됩니다. 복사 가능한 출력은 양쪽을 모두 커버합니다: 스타일시트에 바로 넣을 CSS 블록과, 이름 지정된 영역마다 하나의 grid-area div를 포함하는 HTML 뼈대입니다.
Grid와 flexbox는 서로 다른 레이아웃 문제를 해결하며, 이 사이트의 css-flexbox-generator는 내비게이션 바나 카드 더미처럼 단일 행 또는 열의 유연한 아이템을 배치하는 1차원 레이아웃에 더 적합한 시작점입니다. 반면에 명시적인 행과 열, 혹은 header/nav/main/footer 같은 이름 지정 영역이 필요한 2차원 제어를 원한다면 이 그리드 생성기를 사용하세요. 두 도구는 종종 같은 페이지에 함께 쓰입니다. 페이지 뼈대는 grid로, 그 안의 조각들은 flexbox로 구성하는 식이지요. 이 사이트의 모든 도구와 마찬가지로, 이 도구도 완전히 브라우저 안에서 실행됩니다. 업로드도, 계정도 필요하지 않습니다.