How to Make a Row Stretch Across All Columns in CSS Grid?

Make Row Stretch Across All Columns in CSS Grid: Adjusting the Extents

When extending your navigation row across all columns in a CSS grid, ensure you specify the appropriate column lines. Initially, you had defined:

<code class="css">grid-column: 1 / 2;</code>

This defines the row to extend from grid column line 1 to line 2, covering only one column.

Solution 1: Extending to the Last Line

To have the row stretch across all columns, you can adjust the grid-column property to extend it to the last line:

<code class="css">grid-column: 1 / 3;</code>

This indicates that the row should start at the first column line and end at the third (last) column line.

Solution 2: Using Negative Values

Alternatively, you can use negative values to reference from the end of the grid:

<code class="css">grid-column: 1 / -1;</code>

Here, -1 represents the last column line, effectively making the row span all columns.

Adjusted Code:

<code class="css">body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;    /* Adjusted to span all columns */
  grid-row: 1 / 2;        /* Adjustment for explicit grid */
  background-color: #5eccc0;
}

...</code>

The above is the detailed content of How to Make a Row Stretch Across All Columns in CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!