LAYOUT LAB / CANONICAL HTML + CSS

목록과 상세를 나란히

항목을 탐색하면서 선택한 내용을 함께 볼 수 있는 두 영역.

720px

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

실행한 HTML·CSS 코드
<section class="list_detail" aria-label="Customer records">
    <nav class="list_detail_list"><a href="#">Acme Co.</a><a href="#">Northwind</a></nav>
    <section class="list_detail_detail">Selected customer timeline</section>
</section>

<style>
.list_detail {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.list_detail_list {
    min-inline-size: 0;
}

.list_detail_detail {
    min-inline-size: 0;
}

</style>
원문 가이드