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

💁‍♂️ Alternatively you can also use this .full-bleed utility class

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 →

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.