Fullwidth Content Strips and CSS Subgrid = ❤️

When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS

To lay out the content inside those fullwidth strips, with respect to the main grid, CSS Subgrid comes in handy

In this article, we’ll be exploring one specific use case: augmenting a Grid-infused article layout. This article layout will allow for certain sections of content to break out into full-width areas.

.article-body {
    display: grid;
    grid-template-columns: [fullWidth-start] 1rem 
                           [left-start]      1fr 
                           [article-start right-start] minmax(20ch, 80ch) 
                           [article-end left-end] 1fr 
                           [right-end] 1rem [fullWidth-end];
}

.article-body .full-width {
    display: grid;
    grid-template-columns: subgrid;
}

.article-body .full-width .right {
    grid-column: right;
}

With this addition, children of .full-width can target columns of .article-body itself.

Use CSS Subgrid to layout full-width content stripes in an article template →