How to Make CSS Grid Rows Span Multiple Columns?

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:

<code class="css">grid-column: 1 / 4;  // Spans columns 1, 2, and 3</code>

Explicit Grid Area:

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

<code class="css">grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2</code>

Negative Values:

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

<code class="css">grid-column: -2 / -1;  // Spans the last 2 columns</code>

Column Line Clamping:

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

<code class="css">grid-column: auto;
grid-column-end: 100%;</code>

Auto-sizing with Minimum:

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

<code class="css">grid-column: auto;
min-width: 400px;</code>

Example:

To stretch the navigation row across all columns:

<code class="html"><div class="container">
  <div class="main-nav">
    ...
  </div>
  ...
</div></code>

<code class="css">.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

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

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

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