LAYOUT LAB / CANONICAL HTML + CSS

grid-wrapper

Center grid tracks while allowing full-width breakout tracks.

영역 너비 720px

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

실행한 HTML·CSS 코드

<section class="grid_wrapper" aria-label="Marketing page">
    <main class="grid_wrapper_main">Centered campaign copy</main>
</section>

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

.grid_wrapper_main {
    grid-column: 2;
}

</style>

원문 가이드