LAYOUT LAB / CANONICAL HTML + CSS

cover

Keep a central region balanced between optional header and footer.

720px

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

실행한 HTML·CSS 코드
<section class="cover" aria-labelledby="cover-title">
    <header><p>Step 2 of 4</p></header>
    <main><h1 id="cover-title">Choose a billing profile</h1></main>
    <footer><button>Continue</button></footer>
</section>

<style>
.cover {
    display: grid;
    gap: 1rem;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
    padding: 1rem;
}

</style>
원문 가이드