LAYOUT LAB / CANONICAL HTML + CSS

twelve-span-grid

Provide a twelve-column placement scaffold.

영역 너비 720px

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

실행한 HTML·CSS 코드

<section class="twelve_span_grid" aria-label="Dashboard modules">
    <article class="twelve_span_grid_item">Revenue module</article>
    <article class="twelve_span_grid_item">Retention module</article>
    <article class="twelve_span_grid_item">Pipeline module</article>
</section>

<style>
.twelve_span_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.twelve_span_grid_item {
    grid-column: span 4;
}

</style>

원문 가이드