How to Span Rows and Columns with CSS Grid?

Cross-Row, Cross-Column Divs in a Grid

Building upon the issue of expanding divs vertically in a grid, we now explore a more complex challenge: simultaneously spanning both rows and columns. In a five-element row, how can we strategically position larger elements in the center?

Non-Ideal Approaches

Floating the element to the side is an inherent result of the float property's behavior. Additionally, neither HTML Tables nor CSS Grid Layout are viable solutions here.

Browser Compatibility

CSS Grid offers a seamless solution, but browser support has historically been limited. However, recent updates to major browsers have made Grid Layout fully available.

CSS Grid Solution

Grid Layout provides an elegant solution. Without altering the HTML, nested containers, or setting fixed heights:

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

To span specific rows and columns:

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

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

By defining the starting and ending rows and columns, we can precisely control the size and position of divs within the grid, achieving the desired layout.

The above is the detailed content of How to Span Rows and Columns with CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!