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:

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:

CSS

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

Then for items to span the full viewport:

CSS

.content__full {
	grid-column: full;
}

See the source link for more details.

Tags: