그리드 또는 테이블 레이아웃을 사용하지 않고 그리드의 여러 행과 열에 걸쳐 Div를 확장하는 방법은 무엇입니까?

비그리드 기술을 사용하여 그리드에서 Div를 여러 행과 열로 확장하려면 어떻게 해야 합니까?

이전에 다음과 같은 솔루션을 탐색했음에도 불구하고 여러 행에 걸쳐 있으므로 이제 문제는 행과 열을 모두 확장하는 것입니다. 그리드 또는 테이블 레이아웃을 사용하지 않고 이를 달성하려면 다음 접근 방식을 고려하세요.

CSS 그리드에 대한 브라우저 지원

이 문제가 제기된 이후 주요 브라우저에서는 CSS 그리드 레이아웃을 완벽하게 지원하는 버전을 출시했습니다. 이 단순화된 레이아웃 접근 방식을 사용하면 HTML 수정, 중첩된 컨테이너 또는 컨테이너 높이 수정이 필요하지 않습니다.

CSS 그리드 구현

다음은 CSS 그리드를 사용한 샘플 구현입니다. :

<code class="css">#wrapper {
    display: grid;                            /* 1 */
    grid-template-columns: repeat(5, 90px);   /* 2 */
    grid-auto-rows: 50px;                     /* 3 */
    grid-gap: 10px;                           /* 4 */
    width: 516px;
}

.tall {
    grid-row: 1 / 3;                          /* 5 */
    grid-column: 2 / 3;                       /* 5 */
}

.wide {
    grid-row: 2 / 4;                          /* 6 */
    grid-column: 3 / 5;                       /* 6 */
}

.block {
    background-color: red;
}</code>

위의 코드는 동일한 크기의 열과 자동 크기의 행이 있는 CSS 그리드를 사용합니다. .tall 클래스는 두 개의 행(1과 2)에 걸쳐 있고 .wide 클래스는 두 개의 열(3과 4)에 걸쳐 있으며, 이는 Grid-row 및 Grid-column 속성에 표시된 대로입니다. Grid-gap 속성은 요소 사이에 공간을 추가합니다.

위 내용은 그리드 또는 테이블 레이아웃을 사용하지 않고 그리드의 여러 행과 열에 걸쳐 Div를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!