Home >Web Front-end >CSS Tutorial >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?

Susan Sarandon
Susan SarandonOriginal
2024-11-03 03:10:291156browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn