LAYOUT LAB / CANONICAL HTML + CSS

columns

Flow long content into balanced text columns.

720px

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

실행한 HTML·CSS 코드
<article class="columns" aria-labelledby="columns-heading">
    <h2 id="columns-heading">Release notes</h2>
    <p>Several short updates can flow into balanced columns when there is room.</p>
    <p>When the container narrows, the same content returns to a single column.</p>
</article>

<style>
.columns {
    column-gap: 2rem;
    columns: 18rem;
}

</style>
원문 가이드