Aligning multiple column content using subgrid
Introduction
It’s been a “quest for the holy grail” kind of affair for me for many years… how to align different height columns within a grid item. We’re there at last using CSS subgrid, mostly. Currently as of writing (May 2023) only Firefox and Safari have support.
Using @supports to test availability
If you’re using a browser capable of interpreting subgrid you’ll see the results below. If not you’ll see an error message. Not everyone has access to Safari (Apple only) but you can download Firefox and give it a try until the Chromium-based browsers ‘catch up.’
subgrid, please check the caniuse.com list of browsers that do support it.
Battlestar Galactica
A group of humans flee the Cylons, a race of cybernetic lifeforms, in search of a new home.
Stargate SG-1
A team of military and scientific personnel travel through the Stargate, an ancient portal that connects Earth to other planets.
Star Trek – The Original Series
The crew of the USS Enterprise explores the galaxy, seeking out new life and new civilisations.
Star Wars – Episode IV “A New Hope”
A group of rebels fight against the evil Galactic Empire.
Stranger Things – Season One
A group of friends in the 1980s investigate the mysterious disappearance of their friend, Will Byers, and uncover a dark government conspiracy.
Westworld
A futuristic theme park where visitors can interact with lifelike androids.
Adding the subgrid
All the magic happens in this demo when we apply subgrid to the grid-template-rows property on the HTML article element.
article {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}The layout is deliberately a bit rough
I’ve left the descriptive text ‘as-is’ to more easily highlight that each row within the column is now properly spaced. In reality I would probably use the -webkit-line-clamp hack to truncate at 2 or 3 lines.
I also added word-break: break-all to the header and descriptive text to make it look a little better as the real estate is a little limited and my choice of font-size a tad large.
Download sample code
I’ve assembled all the parts so that you can play with them. The standard – software is provided “as is”, without warranty of any kind – applies here.
That’s all folks
This has been a missing piece of the puzzle for a long time and whilst the Chromium-based browsers are lagging behind there does appear to be a light at the end of the tunnel. Hopefully soon all the major players will be up to speed and this quest will be at an end.
// End of Project
More Information
Further Reading
- Can I Use? CSS Subgrid (caniuse.com)
- Firefox Download (mozilla.org)
- MDN Docs: Subgrid (developer.mozilla.org)
- -webkit-line-clamp hack (css-tricks.com)
About Dave Barr
