Promo image showing a snippet of the diagram of our grid and subgrid from below

CSS Grid was missing one important piece when it's Level 1 specification was released into the world: Subgrid. The Level 2 specification is still in "Working Draft" status, but we have our first browser implementation. Mozilla has the Subgrid syntax in Firefox Nightly.

Now that we have a live implementation, I've begun playing with the subgrid. Subgrid allows for elements that are grandchildren of the Grid container to take part in the initial grid definition. If you want a primer on all things Grid Level 2, read Rachel Andrew's excellent article on it. For a fun layout using its power, read Michelle Barker's CSS{IRL} post.

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.

If you're looking for more information on this design pattern, it's covered in my CSS Grid course here.

Setting up our Grid

Let's dive in to the code.

Our first task will be setting up our article's basic Grid. In this case, we'll take advantage of the power of Grid's "named grid lines" to make our lives easier down the road.

.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];
}

This setup gives us 1rem gutters on the left and right hand side, followed by "variably squishy" gutters of 1fr. Finally, we have a center column with a minimum size of 20ch and a maximum of 80ch. The ch unit giving us a comfortable reading line-length for the center column.

We can use the names in the braces ([]) to then place content in any of the areas we've created via grid-column: fullWidth;.

Struggling to visualize that? I don't blame you. Here's a quick graphic to illustrate:

Graphic illustrating how the lines are formed and named with a few boxes illustrating where boxes assigned to various lines will show up.

Placing content on our grid

Now that our grid is set up, we need to place content on it properly. Any elements within the article-body element will fill grid areas across the horizontal axis. This will look absolutely busted (a colloquialism meaning REALLY broken).

Let's fix that by putting any direct child into the article grid column.

.article-body > * {
grid-column: article;
}
.full-width {
grid-column: fullWidth;
background-color: lightblue; /* For that full-width feeling! */
}

Now our general content will be in a nice constrained column and any element with class="full-width" will go in a full-width stripe.

This is handy enough without going any deeper. Anything inside that element can no be styled as a full-with item with all the white space it wants. But what if you want to have an element centered the same way inside the stripe? You'd need to create a new grid context and create columns of the proper size. In our example, we could do that, but in some circumstances dealing with "variable squishiness" may make that impossible. Even though it's possible in our case, the code would have us repeating ourselves in odd ways.

To create additional layouts inside our full-width stripe that take part in the initial grid declaration, we need subgrid!

Enter Subgrid

The subgrid specification gives us access to the initial grid declaration's columns and/or rows. I remember hearing some debate around the syntax and whether it should inherit the entire grid or let the author control columns or rows. I'm so glad they landed where they did. The syntax feels inspired.

In our use case, we just need the columns.

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

That's it! we now get all of the columns that were declared on .article-body.

Let's use those named lines and create some classes that we can use for various types of content inside a full-width stripe.

Boxes placed inside the full-width element using the grid-column declarations below

.fullWidth-center {
grid-column: article;
}
.fullWidth-right {
grid-column: right;
text-align: right;
}
.fullWidth-left {
grid-column: left;
}

When we put it all together, we can create some interesting layouts with minimal effort!

Here's the finished Codepen. You'll need to be running the Firefox Nightly build to see the finished product.

See the Pen

Speaking of needing a specific browser ... I can hear a few of you out there!

"But Bryan!" you say. "Browsers don't support this yet! Even when the modern browsers are supporting this, old browser still need support! I guess we can't use this yet. Oh well!"

No, no. You don't get off that easy.

Supporting browsers that don't support subgrid

A comparison of Firefox Nightly vs Firefox 70 and how this support query looks

Just like supporting browsers that don't support Grid yet, we can support browsers that don't support subgrid.

Since we know the answer to the question "Do websites need to look exactly the same in every browser (... dot com...) is "No," let's talk about what this design pattern can look like in older browsers.

What if we started our stripes as full-width with centered content? In most situations that should be enough. It's a clean design pattern and then we can "fall forward" into newer, cooler design patterns.

Let's talk about what we need to change.

First, let's declare a base style for .full-width. We'll use one of my favorite unexpected design patterns: the self-centering stripe with grid.

.full-width {
grid-column: fullWidth; /* Sets where the element is in the parent grid */
background-color: lightblue; /* Pretty light blue! */

display: grid; /* Sets a new Grid context */
grid-template-columns: minmax(20ch, 80ch); /* 1 column to match the [article] sizing */
justify-content: center; /* Center the content */

padding: 1rem; /* Keeps gutters in shape for mobile */
}

Now, we'll use the power of CSS Feature Queries to fall forward into subgrid support. In order to do this, we'll unset a few values from the previous code and put our subgrid code in the CSS.

@supports (grid-template-columns: subgrid) {
.full-width {
grid-template-columns: subgrid; /* changes columns from 1 to inheriting grid lines */
padding: 0; /* Unset padding... that's built into our columns */
}
/* All the other selectors we need */
.fullWidth-center {
grid-column: article;
}
.fullWidth-right {
grid-column: right;
text-align: right; /* Don't want to right align the text unless the element is right-aligned as well */
}
.fullWidth-left {
grid-column: left;
}
}

You now have an interesting layout in browsers that support subgrid and a perfectly lovely layout for browsers that don't.

The future of web layout is amazing. What are some other design patterns you might use CSS Subgrid for? Send me a message on Twitter and let me know your thoughts.

Webmentions

  1. Veerle Pieters Veerle Pieters
    Use CSS Subgrid to Layout Full-width Content Stripes in an Article Template Learn how to augment a Grid-infused article layout that allows for certain sections of content to break out into full-width areas. bryanlrobinson.com/blog/use-css-s…
  2. codingnova
    If you have a limited-width container, say a centered column of text, “breaking out” of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has it’s caveats (e.g. requiring hidden overflow on the body, the container needs to be centered, etc.), at least it’s easy to pull off and everything else in the container just happily goes about its business. There have been quite a few posts about another way to do this, involving CSS grid: Tyler’s “Breaking Out with CSS Grid Layout” which Rachel replied to in a post of her own. Rachel covered these full-width elements in another post, “Editorial Design Patterns With CSS Grid And Named Columns” Selen Gora’s “Setting the box in container to full width with CSS Grid” Bryan Robinson’s “Use CSS Subgrid to layout full-width content stripes in an article template” The one thing that all these have in common is that they presuppose you have an edge-to-edge grid. I kept thinking to myself, “Do people really use CSS grid for their entire page layout?” Like, essentially body { display: grid; }¹? The articles themselves tend to use a class name, but the assumption is that that parent is a full-browser-width container. I asked around a little, and there was some murmurs of, “yes, I totally do that.” So, cool, it’s a thing people do. My first thought was that that seems like a pain in the butt for a few of reasons: A typical “header” and “footer” are full-width, so having to explicitly place them on the grid and stretch them over the correct number of columns and keep that up to date as you fiddle with the columns seems like a lot of work compared to having the header just be a block-level <header> sitting at the top (or bottom) of the site. You can still have an edge-to-edge grid in the middle, and have block-level elements above and below. Having to explicitly place all the items in an “article” into a middle column (e.g. article > * { grid-columns: 2 / 3; } just so you can occasionally “stretch” something by spanning more columns just feels weird to me. Like, if 95% of content lives in a centered column, something feels both more robust and relaxed about just putting that content into a parent element that handles the layout, rather than having each individual element needing to place itself onto the grid and the end result is that it appears as if it’s all in a shared parent. I’m not hating on the technique necessarily, just noting that it makes me feel weird somehow. But I’m probably just old. I’d advise never using display: grid; directly on the body element. One common problem: browser extensions might place things into the DOM within the body, which would then be placed onto your grid and could screw up your layout. Seen it happen. I’d say it’s just like the React best practice not to bind the whole body, but to use a div child that is effectively the same thing anyway, just scoped to a selector. The post Full-Width Elements By Using Edge-to-Edge Grid appeared first on CSS-Tricks. Source link
  3. Full-Width Elements By Using Edge-to-Edge Grid If you have a limited-width container, say a centered column of text, “breaking out” of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has it’s caveats (e.g. requiring hidden overflow on the body, the container needs to be centered, etc.), at least it’s easy to pull off and everything else in the container just happily goes about its business. There have been quite a few posts about another way to do this, involving CSS grid: Tyler’s “Breaking Out with CSS Grid Layout” which Rachel replied to in a post of her own. Rachel covered these full-width elements in another post, “Editorial Design Patterns With CSS Grid And Named Columns” Selen Gora’s “Setting the box in container to full width with CSS Grid” Bryan Robinson’s “Use CSS Subgrid to layout full-width content stripes in an article template” The one thing that all these have in common is that they presuppose you have an edge-to-edge grid. I kept thinking to myself, “Do people really use CSS grid for their entire page layout?” Like, essentially body { display: grid; }¹? The articles themselves tend to use a class name, but the assumption is that that parent is a full-browser-width container. I asked around a little, and there was some murmurs of, “yes, I totally do that.” So, cool, it’s a thing people do. My first thought was that that seems like a pain in the butt for a few of reasons: A typical “header” and “footer” are full-width, so having to explicitly place them on the grid and stretch them over the correct number of columns and keep that up to date as you fiddle with the columns seems like a lot of work compared to having the header just be a block-level <header> sitting at the top (or bottom) of the site. You can still have an edge-to-edge grid in the middle, and have block-level elements above and below. Having to explicitly place all the items in an “article” into a middle column (e.g. article > * { grid-columns: 2 / 3; } just so you can occasionally “stretch” something by spanning more columns just feels weird to me. Like, if 95% of content lives in a centered column, something feels both more robust and relaxed about just putting that content into a parent element that handles the layout, rather than having each individual element needing to place itself onto the grid and the end result is that it appears as if it’s all in a shared parent. I’m not hating on the technique necessarily, just noting that it makes me feel weird somehow. But I’m probably just old. I’d advise never using display: grid; directly on the body element. One common problem: browser extensions might place things into the DOM within the body, which would then be placed onto your grid and could screw up your layout. Seen it happen. I’d say it’s just like the React best practice not to bind the whole body, but to use a div child that is effectively the same thing anyway, just scoped to a selector. The post Full-Width Elements By Using Edge-to-Edge Grid appeared first on CSS-Tricks. Share this: Facebook LinkedIn Reddit Twitter Tumblr Pinterest Related
  4. Bramus!
    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 →
  5. Используем сабгриды для создания в контенте блоков на всю ширину страницы. Брайан Робинсон собирает демо с фолбеком для браузеров, не поддерживающих сабгриды, то есть для всех, кроме Firefox Nightly — bryanlrobinson.com/blog/use-css-s…
  6. Bryan Robinson Bryan Robinson
    Let me know how it goes! Remember, it only currently works in @FirefoxNightly, but the Feature Query at the end of the post will make sure it looks lovely (if not asymmetric) in all Grid-supported browsers :D
  7. ross ross
    Gonna have to try this out later, thanks!
  8. CSS {IRL} CSS {IRL}
    I keep meaning to start writing about subgrid (and experimenting more with it too) - but I have such a long list of things to write about 😅
  9. CSS {IRL} CSS {IRL}
    Looking forward to reading this 🙂
  10. Bryan Robinson Bryan Robinson
    Spoiler alert: It may reference and link to your "Subgrid is here" post 😃