Make Rows Span Multiple Columns

Rows in CSS Grid can be configured to encompass multiple columns using the appropriate grid properties. Here's how to achieve this:

Line-based Placement:

The most common approach is through line-based placement, where you specify column start and end lines:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

Explicit Grid Area:

Use the grid-area property, which explicitly defines the occupied cells:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

Negative Values:

Negative values in grid-column or grid-column-start can be used for right-to-left placement:

grid-column: -2 / -1;  // Spans the last 2 columns

Column Line Clamping:

This technique uses line clamping to extend the row's end point to the available space:

grid-column: auto;
grid-column-end: 100%;

Auto-sizing with Minimum:

Auto-sizing with a minimum width ensures the row occupies at least a specified number of columns:

grid-column: auto;
min-width: 400px;

Example:

To stretch the navigation row across all columns:

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

By applying one of these methods, you can extend rows or columns across multiple columns in CSS Grid, creating complex and flexible layouts.