New CSS Techniques at the Component Level, Part 1 of 2: CSS Grid

By: David Luhr
Illustration of CSS Grid layout lines and name tabs

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: Design mockup of 4 cards with news articles arranged in grid. Image appears on top, followed by title, date, and summary vertically arranged.

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: Design mockup of wide cards with title, date, summary, and link vertically arranged on left side with image on right side

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: Clock icon vertically aligned with post date and time text

.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.