LAYOUT LAB / CANONICAL HTML + CSS

main-with-rail

Keep primary content dominant with a narrow secondary rail.

720px

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

실행한 HTML·CSS 코드
<section class="main_with_rail" aria-label="Documentation page">
    <main class="main_with_rail_main">API reference article</main>
    <aside class="main_with_rail_side">On this page links</aside>
</section>

<style>
.main_with_rail {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.main_with_rail_main {
    min-inline-size: 0;
}

.main_with_rail_side {
    min-inline-size: 0;
}

</style>
원문 가이드