LAYOUT LAB / CANONICAL HTML + CSS

fluid-styles

Let a region fill available width without exceeding a readable max.

영역 너비 720px

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

실행한 HTML·CSS 코드

<section class="fluid_styles" aria-labelledby="fluid-title">
    <h2 id="fluid-title">Operations overview</h2>
    <p>The region fills the parent without exceeding the shared page measure.</p>
</section>

<style>
.fluid_styles {
    inline-size: min(100%, 72rem);
    margin-inline: auto;
}

</style>

원문 가이드