In this two-part series, we’ll explore new CSS techniques to see how they can be used on a more granular component level, and the unique benefits these approaches offer.
Grid it up
To kick things off, let’s take a look at CSS Grid.
Grid is undoubtedly amazing at laying out entire websites with ease and reducing the need for media queries to handle responsive design. But, even with all the hype, articles, tutorials, and heated debates, there hasn’t been much discussion of using CSS Grid at the component level, which in my mind is one of the most exciting opportunities of this new layout technique.
Example time
To illustrate how useful Grid is for more granular layout needs, let’s use the example of a card component, which is often used for lists of news items or blog posts. Here’s the design we’ll build for devices with smaller screens:
While cards have existed for some time and can definitely be achieved with many different layout techniques, CSS Grid is a true joy to use for this component, along with any other block/module/component-level layouts. Here’s why.
Spell it out
The first benefit of Grid when working on a component is the semantic value of using grid-template-areas. Here at DockYard, we love the BEM naming convention, so this is a great opportunity to employ it with our custom-named grid areas:
.card {
display: grid;
…
@media (max-width: 899px) {
…
grid-template-areas:
"card__image card__image card__image"
". card__title ."
". card__body .";
…
}
}
Grid’s ASCII-like syntax illustrates a component’s layout structure without even needing to see the rendered version, and declaring the grid-area of each “element” within the card just feels oh so nice and organized.
Rearrange as you please
CSS Grid has a major advantage for responsive design at the component level: you can simply redeclare grid-template-areas on the parent block class in whatever order or rearrangement you need at various breakpoints. This means no more wrangling the order property in Flexbox!
For example, we want the order of elements in our news card to differ for larger devices:
To achieve this, all we need to do is change up grid-template-areas to our liking in a media query, and adjust the column/row sizes to match the design:
.card {
display: grid;
grid-row-gap: 20px;
align-items: start;
…
@media (max-width: 899px) {
…
grid-template-areas:
"card__image card__image card__image"
". card__title ."
". card__body .";
grid-template-columns: 20px 1fr 20px;
}
@media (min-width: 900px) {
…
grid-template-areas:
"card__title card__image"
"card__body card__image";
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 3fr;
grid-column-gap: 20px;
}
}
That’s it! We have two distinct layouts/arrangements without any hassle.
Flex and Grid are best buds for component work
The collection of cards are laid out using Flexbox, which is still my go-to for arranging a collection of similar items. I reach for Grid whenever I’m structuring a component’s internal layout, and especially when the order of elements changes at various breakpoints, as we saw above.
But, even within a component-level Grid layout, Flexbox is still a super quick and easy solution for snapping some siblings into alignment, such as vertically aligning text with an icon in our card’s taxonomy content:
.card__taxon {
…
display: flex;
align-items: center;
…
}
Finished layout
Using both Flexbox and CSS Grid together, we can achieve the fully responsive card layout of our dreams:
Start using Grid at any level
Add this approach to your toolbox and experience the pure joy of using CSS Grid for both macro and micro layout. Your pages and components will thank you.
Not sure if you’re able to use Grid in production? I’d highly recommend watching Jen Simmons’ YouTube series on Resilient CSS and I think you’ll be pleasantly surprised that you can probably take advantage of all this new CSS goodness today.
Coming up in Part 2
In Part 2, we’re looking at how we can use a new technique called Responsive Variables with our card layout to enjoy an even more maintainable code structure.
