LAYOUT LAB / CANONICAL HTML + CSS

가로로 넘기는 목록

Let a row scroll horizontally instead of wrapping.

720px

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

실행한 HTML·CSS 코드
<section class="reel" aria-label="Upcoming events">
    <article>Design critique</article>
    <article>Planning workshop</article>
    <article>Launch review</article>
</section>

<style>
.reel {
    display: grid;
    gap: 1rem;
    grid-auto-columns: minmax(14rem, 35%);
    grid-auto-flow: column;
    overflow-x: auto;
}

</style>
원문 가이드