LAYOUT LAB / CANONICAL HTML + CSS

deconstructed-pancake

Let equal cards stretch in a row and stack naturally when narrow.

영역 너비 720px

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

실행한 HTML·CSS 코드

<section class="deconstructed_pancake" aria-label="Plan comparison">
    <article class="deconstructed_pancake_item">Solo plan</article>
    <article class="deconstructed_pancake_item">Studio plan</article>
    <article class="deconstructed_pancake_item">Agency plan</article>
</section>

<style>
.deconstructed_pancake {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.deconstructed_pancake_item {
    flex: 1 1 16rem;
}

</style>

원문 가이드