디자인
CSS 그리드 생성기
시각적으로 CSS 그리드 레이아웃 구축
레이아웃 프리셋 (10)
셀을 가로질러 드래그해 사각형을 칠하거나 셀을 하나씩 클릭하세요. 이름이 지정된 모든 영역은 직사각형이어야 합니다.
실시간 미리보기
1차원: CSS Flexbox 생성기.
이름 지정 영역으로 CSS 그리드 구축
템플릿 영역에 글자 격자를 그리거나 사전 설정을 선택하세요. 미리보기에서 각 영역이 다른 색조로 표시됩니다.
FAQ
grid-template-areas란 무엇인가요?
레이아웃 영역(header, sidebar, main…)에 이름을 붙이고 그리드 선 번호 대신 이름으로 항목을 배치하는 방식입니다. 아래 셀을 클릭해 영역 문자를 칠하면 CSS가 실시간으로 업데이트됩니다.
프리셋에서 시작할 수 있나요?
예. Holy grail, dashboard, magazine, app shell을 포함한 레이아웃 프리셋 열 개로 이름 지정 영역을 한 번에 불러올 수 있습니다.
업로드되는 게 있나요?
아니요. CSS는 전부 브라우저에서 생성됩니다.
마지막 업데이트: