Breaking Out with CSS Grid Layout

A side-by-side comparison of a narrow viewport and a wider one, with one grid item spanning the full width in the latter, while the rest are constrained via the centre column.

If you’ve ever needed to have a content column with a maximum width, but have specific elements span the full width of the viewport, thus breaking out of the column, CSS Grid can do this really simply. First the grid on the container:

Code language: CSS

.content {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) 
    [main-start] minmax(0, 40em) [main-end]
    minmax(1em, 1fr) [full-end];
}

This defines the columns, including the max width of the content, and a gutter. For normal content:

Code language: CSS

.content > * {
  grid-column: main;
}

Then for items to span the full viewport:

Code language: CSS

.content__full {
  grid-column: full;
}

See the source link for more details.

Source link

Breaking Out With CSS Grid Layout - Cloud Four