LAYOUT LAB / CANONICAL HTML + CSS

page-grid

Align page content to margins, gutters, and a central track.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<section class="page_grid" aria-label="Article page">
    <main class="page_grid_content">Centered article track with fluid outer gutters</main>
</section>

<style>
.page_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 72rem) minmax(1rem, 1fr);
}

.page_grid_content {
    grid-column: 2;
}

</style>
원문 가이드