Breaking Out with CSS Grid Layout

Image

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.