Monday, 1 February, 2021 UTC
Summary
CSS is great and getting better all the time. Over recent years, especially, it has evolved really fast, too. Understandably, some of the really handy powers CSS gives you might have slipped you by because of this, so in this article, I’m going to show you some really handy stuff you can do with modern CSS today, and also share some stuff that we can look forward to in the future.
Let’s dig in.
Masonry Layout
Masonry layouts became very popular with Pinterest, Tumblr and Unsplash, and up until recently, we tended to rely on JavaScript to assist with our layout, which is almost never a good idea.
Sure, you can use CSS multicol pretty darn effectively to achieve a masonry layout, but that approach can be problematic with tabbed-focus as it lays content out in columns. This creates a disconnect between the visual layout and the tabbing index.
Fast forward to today (well, very shortly in the future) and a masonry layout is pretty trivial, thanks to an update to CSS Grid. Here’s a complete masonry layout, with gutters, in 6 lines of CSS:
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
grid-gap: 1rem;
}The magic is in
grid-template-rows set as masonry, which turns it into the “masonry axis”, thus providing the “filled in” layout we’ve all come accustomed to.Let’s expand on this and explore a quick demo of creating a responsive masonry layout. Using a slightly modified version of the above CSS, we can replace the
grid-template-columns line to use this auto grid method instead:.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-template-rows: masonry;
grid-gap: 1rem;
}The
minmax() function allows us to define what the smallest size is for our items, which for us, is 16rem. Then we tell minmax() what the maximum size should be for each item. We declare that as 1fr, which takes 1 portion of the remaining available space.This definition of
grid-template-columns allows our layout to break and stack if it runs out of horizontal space which the masonry axis then automatically sorts our remaining elements for us.Note: Right now, masonry is only working in Firefox Nightly, or behind a flag, but the grid layout will still work perfectly in non-supporting browsers, making it a decent progressive enhancement target.
You can also read this great article, too.
Resources
- Content-visibility on web.dev
- Another video explaining what happens under the hood
- A handy article with some useful notes to know about
content-visibility
Wrapping Up And What’s Coming Up
That’s a pretty cool new CSS, right? There’s loads more arriving soon and loads in the long-term pipeline too. We can look forward to Media Queries Level 5 which let us target the current ambient light level and whether or not the user prefers reduced data.
We’ve also got CSS Nesting in draft, which will give us Sass-like nesting capabilities like this:
.my-element {
background: red;
& p {
background: yellow;
}
}We’re getting even more control too, with font metrics override descriptors and Cascade Level 5, which introduces layers to the cascade. Prototyping is happening with container queries too!
Lastly, there are some cool new tricks on the horizon, like scroll-linked animations, which will open the door wide-open to a new generation of creative work on the web.
In conclusion, the present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS: things will continue to get better and better on your projects too.