그리드의 다중 행 및 열 Div
그리드의 여러 행과 열에 걸쳐 div를 확장하는 솔루션을 찾고 있습니다. CSS 그리드 레이아웃이나 테이블을 사용하지 않고.
최근 브라우저의 그리드 레이아웃 지원
글 작성 당시 그리드 레이아웃의 브라우저 지원에 대해 우려하셨던 반면, 최신 버전에서는 의 주요 브라우저가 이제 완전한 지원을 제공합니다. 현재 브라우저 지원에 대한 자세한 내용은 관련 문서를 참조하세요.
CSS 그리드 레이아웃을 사용한 솔루션
그리드 레이아웃을 사용하면 HTML 수정 없이 원하는 레이아웃을 간단하게 구현할 수 있습니다. 중첩된 컨테이너 또는 고정된 컨테이너 높이. 다음은 코드 조각입니다.
<code class="css">#wrapper { display: grid; // Enable Grid Layout (1) grid-template-columns: repeat(5, 90px); // Define columns (2) grid-auto-rows: 50px; // Define rows (3) grid-gap: 10px; // Set cell spacing (4) width: 516px; } .tall { grid-row: 1 / 3; // Span across rows 1 to 2 (5) grid-column: 2 / 3; // Span across columns 2 to 2 (5) } .wide { grid-row: 2 / 4; // Span across rows 2 to 3 (6) grid-column: 3 / 5; // Span across columns 3 to 4 (6) } .block { background-color: red; }</code>
<code class="html"><div id="wrapper"> <div class="block"></div> <div class="block tall"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block wide"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div></code>
이 솔루션은 원하는 레이아웃에 따라 더 큰 요소를 그리드 중앙에 효과적으로 정렬합니다.
위 내용은 CSS 그리드 레이아웃이나 테이블을 사용하지 않고 그리드의 여러 행과 열에 걸쳐 Div를 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!