How Can I Span a Div Across Multiple Rows and Columns in a Grid Without Using CSS Grid Layout or Tables?

Multi-Row and Column Divs in a Grid

You seek a solution to span a div across multiple rows and columns in a grid, without using CSS Grid Layout or tables.

Recent Browser Support for Grid Layout

While you had concerns about Grid layout's browser support at the time of your post, recent versions of major browsers now provide full support. For current browser support details, please refer to the relevant documentation.

Solution Using CSS Grid Layout

With Grid Layout, achieving your desired layout becomes simple without HTML modifications, nested containers, or fixed container heights. Here's a code snippet:

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

This solution effectively aligns your bigger elements in the center of the grid, as per your desired layout.

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