How Can I Make Grid Items Span to the Last Row/Column in CSS Grid?

Can Grid Items Span to the Last Row/Column in Implicit Grids?

In CSS Grid, it's possible to make grid items span to the last row/column in explicit grids using negative integers. However, this technique doesn't work for implicit grids.

Implicit Grids

Implicit grids don't have a fixed number of rows and columns, so it's not possible to directly specify a span to the last row/column. For example, consider the following grid with an unknown number of rows:

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

Spanning in Implicit Grids

To make an item span from the first to the last row in an implicit grid, you can use absolute positioning. In this example, we place the third box above the other boxes and then offset it downwards so that it appears to span the rows:

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

Explicit Grids

In explicit grids, where the rows and columns are explicitly defined, you can use negative integers to span to the last row/column. This is illustrated below:

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

In this example, the .item element will span the entire second column and row of the grid.

Conclusion

While CSS Grid doesn't offer a direct way to span to the last row/column in implicit grids, you can achieve this with absolute positioning. In explicit grids, however, you can use negative integers for this purpose.

The above is the detailed content of How Can I Make Grid Items Span to the Last Row/Column in CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!