Unlock the Power of CSS Subgrid
The latest release of Firefox 71 brings exciting news for web developers: support for CSS subgrid! This game-changing feature revolutionizes the way we work with web layouts, allowing us to easily align items to their parent’s grid container.
A New Era of Grid Alignment
Previously, when we declared a grid container, only its direct descendants could be aligned to the specified columns/rows. With subgrid, we can now create a nested grid that inherits its parent’s tracks, ensuring that elements occupy the same space as their counterparts in other cards. This means no more rough layouts or badly shaped HTML and CSS hacks!
Aligning Rows: A Real-World Example
Let’s take a typical grid of cards, where we want to ensure that each card’s elements align perfectly, regardless of text length. By defining the rows in the container and instructing the card to span all rows, we can achieve a seamless layout. Check out this live demo on CodePen to see it in action!
Columns: The Next Level
The same concept applies to columns. Imagine a simple form UI where we need to align labels and inputs dynamically. Subgrid provides a better solution by using the form’s grid to align the labels’ children, ensuring that the spacing for the labels corresponds to the longest one, and the inputs align automatically.
Progressive Enhancement: The Way Forward
As we explore the possibilities of subgrid, it’s essential to consider fallback options for browsers that don’t support it yet. By using @supports queries, we can ensure a sensible fallback that gets progressively enhanced to the subgrid version.
More Than Just Subgrid: Firefox 71’s Hidden Gems
While subgrid is a significant addition to our CSS toolbox, Firefox 71 brings many more improvements for users and developers alike. From the implementation of the column-span property to aspect ratio mapping and support for the path value, there’s much to explore.
JavaScript Updates: Promise.allSettled() and More
On the JavaScript side, the Promise.allSettled() method is now supported, providing an array with the outcome of each promise, whether fulfilled or rejected.
Get Ready to Elevate Your Web Development Skills
With Firefox 71, it’s the perfect time to learn how to harness the power of subgrid and other new features. Stay ahead of the curve and take your web development skills to the next level!