디자인 / 레이아웃
CSS Grid 생성기 (시각적 Grid-Template-Areas 빌더)
열, 행, 간격을 설정하고 셀을 드래그해 header, sidebar, main과 같은 이름 있는 영역을 만든 다음, 바로 붙여 넣을 수 있는 grid-template-columns, grid-template-rows, grid-template-areas CSS를 복사합니다.
CSS Grid 생성기 (시각적 Grid-Template-Areas 빌더): 200px 1fr 1fr과 같이 입력하는 즉시 트랙 크기가 작성되며, 반복되는 크기는 repeat()으로 변환됩니다. 각 영역은 grid-template-areas의 이름이 되고, 빈 셀은 점으로 표시됩니다. 또한 grid-area를 사용해 요소를 배치하는 규칙이 생성됩니다. CSS 요구 사항에 따라 영역은 직사각형이어야 하며 서로 겹칠 수 없습니다. 레이아웃은 이 브라우저에 저장됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
셀을 가로질러 드래그하여 영역을 만드십시오. 여러 행과 열에 걸쳐 지정할 수 있습니다. 1fr, 200px, auto 또는 minmax(100px, 1fr)과 같은 트랙 크기를 입력하십시오.
CSS
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }각 자식 요소에 해당 영역의 클래스를 지정하십시오. 점으로 표시된 셀은 비워 둡니다.
이름이 지정된 영역
grid-template-areas의 각 문자열은 한 행이고 각 단어는 한 셀입니다. "header header" "sidebar main"은 헤더를 두 열 전체에 배치합니다. grid-area: main이 지정된 자식 요소는 main으로 이름이 지정된 모든 셀을 채웁니다. 이름이 클래스 이름과 일치할 필요는 없지만, 동일하게 유지하면 CSS를 읽기 쉬워집니다.
일반적인 트랙 크기
minmax(200px, 1fr)은 열의 너비를 최소 200 px로 유지하면서 늘릴 수 있게 합니다. auto는 콘텐츠에 맞춥니다. repeat(auto-fill, minmax(12rem, 1fr))은 들어갈 수 있는 만큼 열을 만들어 카드 그리드에 사용할 수 있는 패턴입니다. 간격은 CSS clamp 생성기로 유동적으로 설정할 수 있습니다.
사용 방법
- 열과 행의 개수를 선택하고 크기를 입력합니다.
- 셀을 가로질러 드래그해 영역을 만들고 이름을 변경합니다.
- CSS를 복사하고 각 자식 요소에 해당 영역의 클래스를 지정합니다.
개인정보 보호 및 제한사항
레이아웃은 브라우저에서 작성됩니다. 업로드하지 않습니다.
관련 도구
자주 묻는 질문
fr은 무엇을 의미합니까?
남은 공간의 한 단위입니다. 고정 크기와 간격을 제외한 뒤 1fr 2fr로 설정하면 두 번째 열의 너비가 첫 번째 열의 두 배가 됩니다.
영역이 겹치거나 L자 모양이 될 수 없는 이유는 무엇입니까?
grid-template-areas는 각 이름을 한 번만 사용하는 직사각형만 허용합니다. CSS Grid에서 요소를 겹치게 배치할 수는 있지만, 이름 있는 영역 대신 명시적인 라인 번호를 사용해야 합니다.
반응형 레이아웃은 어떻게 만듭니까?
넓은 화면용으로 생성된 CSS를 사용하고, 좁은 화면에서는 미디어 쿼리 안에서 grid-template-columns와 grid-template-areas를 다시 정의합니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요