The latest Chrome release, Chrome 117, went stable this past week. If you’re interested in keeping track of Chrome releases, there is a website you can check out to see the release schedule. It’s particularly useful if you’re someone who pays close attention to these updates.
Chrome typically releases a major version about once a month, and while I usually don’t delve deep into each release, this one has me excited. Why? Because Chrome has finally caught up with Firefox and Safari in shipping the subgrid
feature across all major browsers.
Here’s a quick timeline:
- Firefox first shipped subgrid on Dec 2, 2019.
- Safari followed suit on Sep 11, 2022.
- Chrome finally added subgrid on Sep 12, 2023.
If you’re curious about browser support for subgrid, tools like Caniuse can provide insights into when specific versions started supporting the feature.
But what exactly is subgrid? In simple terms, it’s a keyword that works in conjunction with grid-template-columns
and grid-template-rows
to align grid lines from the parent grid within a child element.
Wondering if your browser supports subgrid? You can quickly test it using a code snippet like this:
output::after {
content: "❌ Your browser does not support subgrid";
}
@supports(grid-template-rows: subgrid) {
output::after {
content: "✅ Your browser supports subgrid";
}
}
One classic use case of subgrid is aligning card elements within a grid, ensuring they line up seamlessly. A simple demo or example can help visualize this concept effectively.
It’s also handy for scenarios like aligning CSS counters on list items, which can be challenging without the subgrid feature. These are just a few examples of how subgrid can improve layout designs.
If you want to explore more practical applications of subgrid, you can check out videos and tutorials from experts like Rachel Andrew and Kevin Powell. They delve deeper into the nuances and advantages of using subgrid in CSS layouts.
Overall, the addition of subgrid support in Chrome 117 opens up exciting possibilities for web developers looking to optimize their layouts and create more dynamic designs. Explore the feature, experiment with it in your projects, and see how it can enhance your web development workflow.