LAYOUT LAB / CANONICAL HTML + CSS

clamped-card

Constrain a card to a readable fluid width.

720px

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

실행한 HTML·CSS 코드
<article class="clamped_card" aria-labelledby="clamped-title">
    <h2 id="clamped-title">Invite teammate</h2>
    <p>The card grows with the viewport but stops at the intended reading width.</p>
</article>

<style>
.clamped_card {
    inline-size: clamp(16rem, 50vw, 28rem);
    margin-inline: auto;
}

</style>
원문 가이드