성배 CSS 그리드 레이아웃 — 준비된 코드
CSS 그리드 레이아웃을 시각적으로 디자인합니다. 열, 행 및 간격을 설정한 다음 셀에 영역 이름을 입력하여 그리드 템플릿 영역을 만듭니다. 실시간 미리보기와 복사 가능한 CSS 및 HTML을 사용합니다.
처리 중...
0%
결과
이 페이지는 성배 레이아웃(3개의 열과 3개의 행)이 미리 로드된 그리드 생성기를 엽니다. 머리글과 바닥글은 전체 너비에 걸쳐 있고 탐색/기본/별도 행이 그 사이에 있습니다. 머리글 행은 자동 높이를 사용하고 중간 행은 남은 공간을 채우며 두 측면 열은 200px로 고정되고 기본 열은 나머지 공간을 차지합니다.
성배 레이아웃이라는 이름을 얻은 이유는 CSS 그리드 이전에는 안정적으로 구축하기가 정말 어려웠기 때문입니다. 수년간의 부동 소수점 해킹, 테이블 레이아웃 및 절대 위치 지정을 통해 이 정확한 모양을 가짜로 만들려고 했습니다. 그리드 템플릿 영역을 사용하면 5개의 명명된 영역과 소수의 트랙 크기로 축소되므로 CSS 그리드를 가르치는 첫 번째 표준 예제로 남아 있습니다.
이 페이지의 모든 숫자와 간격은 여전히 살아 있습니다. 측면 열을 축소하고, 네 번째 행을 추가하거나, 영역 이름을 바꾸면 미리보기와 복사 가능한 CSS가 즉시 업데이트됩니다. CSS 및 HTML 블록을 프로젝트에 직접 복사하세요. 모든 것이 브라우저에서 로컬로 실행되며 아무것도 업로드되지 않습니다.