How to Span a Div Across Multiple Rows and Columns in a Grid Without Using Grid or Table Layouts?

How Can I Make a Div Span Multiple Rows and Columns in a Grid Using Non-Grid Techniques?

Despite having previously explored solutions for spanning multiple rows, the challenge now lies in spanning both rows and columns. To achieve this without using grid or table layouts, consider the following approaches:

Browser Support for CSS Grid

Since raising this question, major browsers have released versions with full support for CSS Grid Layout. This simplified layout approach eliminates the need for HTML modifications, nested containers, or container height fixes.

CSS Grid Implementation

Here's a sample implementation using CSS Grid:

<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>

The code above uses a CSS Grid with equal-sized columns and auto-sized rows. The .tall class spans two rows (1 and 2) and the .wide class spans two columns (3 and 4), as indicated by the grid-row and grid-column properties. The grid-gap property adds space between elements.

The above is the detailed content of How to Span a Div Across Multiple Rows and Columns in a Grid Without Using Grid or Table Layouts?. For more information, please follow other related articles on the PHP Chinese website!