How to Span a Div Across Multiple Rows and Columns Without CSS Grid or HTML Tables?

How to Span a Div Across Multiple Rows and Columns Without CSS Grid or HTML Tables

Often, we encounter the task of creating a grid-like layout with elements spanning multiple rows and columns. However, utilizing CSS Grid or HTML Tables may not be the desired approach. This article provides a non-grid, non-table solution.

Consider a snippet featuring a five-element row, with the goal of placing larger elements in the middle. Using the display: inline-block property, we can achieve a horizontal layout:

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

But how do we handle the vertical spanning?

However, in 2017, major browsers released updates with full support for CSS Grid Layout, providing a straightforward solution. By utilizing the display: grid property, we can create a grid layout without altering HTML or adding nested containers:

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

To span elements across multiple rows and columns, we use the grid-row and grid-column properties:

<code class="css">.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}</code>

Thus, we achieve a grid layout with elements spanning multiple rows and columns, without resorting to HTML Tables or CSS Grid.

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