Chrome 117 was recently released as a stable version. If you’re interested in Chrome releases, there is a website where you can track the plan for future releases. Normally, I don’t write specifically about Chrome updates, as Rachel Andrew does a great job covering web platform updates each month on Web.dev. However, this release is particularly exciting because it includes the shipment of subgrid across all three major browsers.
Subgrid was previously shipped on Firefox on December 2, 2019, and on Safari on September 11, 2022. Chrome was the last to ship subgrid on September 12, 2023. To check for browser support and code accordingly, you can use the Caniuse website.
Subgrid is a keyword that works with grid-template-columns and grid-template-rows, allowing you to incorporate grid lines from the parent grid into the child element. Here’s an example:
“`html
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.child {
grid-column: 2 / 4;
display: grid;
grid-template-columns: subgrid;
}
“`
To check if your browser supports subgrid, you can use the CSS feature @supports. Here’s an example:
“`css
output::after {
content: “❌ Your browser does not support subgrid”;
}
@supports(grid-template-rows: subgrid) {
output::after {
content: “✅ Your browser supports subgrid”;
}
}
“`
One common use case for subgrid is aligning elements within a grid, such as card elements. This ensures that elements with cards align according to shared grid lines. Another use case is aligning web forms with variable length labels. Eric Meyer considered subgrid “essential” seven years ago, and it has proven to be a valuable addition to CSS grid.
If you’re interested in learning more about subgrid, Rachel Andrew has a dedicated talk on CSS subgrid that delves into the details. Kevin Powell also has a series of videos called “Subgrid Awareness Month” that cover various aspects of subgrid, including consistent layouts. CSS grid, in general, provides powerful layout control from the parent element, and subgrid enhances these capabilities even further.
Source link
.webp)
