With CSS Grid finally shipping and enabled by default on most modern browsers, developers across the globe will be jumping with joy at how this new layout module finally solves our layout problems.

However, with the release of this new layout module I have heard some people asking whether this is now the end for our dear friend Flexbox, which has been a lifesaver for many years in trying to make complex layouts a little easier. The short answer to this is no, Flexbox is not dead and in this post, I'm going to illustrate how Flexbox and Grid can work together.

CSS Grid vs Flexbox

Before we dive into the illustration we first need to understand the differences between CSS Grid and Flexbox. Flexbox is used to position elements on a single axis, either a column or a row. Grid on the other hand, is intended to position elements across two axes, columns and rows and this is where the differences lie.

We now need to decide when its best to use Grid and when its best to use Flexbox when creating our layouts. Rachel Andrew has posted a nice article to help us make this decision. Now that we understand the differences, let's get into the illustration.

What we're going to make

We're going to build a card-like UI, similar to the BBC website (check out the full page CodePen for a better idea).

See the Pen Card UI Using Grid & FlexBox by Alex Clapperton (@Pushedskydiver) on CodePen.


Note: Make sure you are using a browser that supports Grid.

Our HTML Markup

Let's start by creating a wrapper for our grid <div class="grid">, some grid items to position everything <div class="grid__item">, and some anchors which will be our cards:

<div class="grid">

    <!-- grid item, containing a card -->
    <div class="grid__item grid__item--1">
      <a class="link" href="" class="card">
        <div class="card__thumbnail"></div>
        <article class="card__content">
          <h1 class="card__title">Post title</h1>
          <span class="card__author">Author</span>
        </article>
      </a>
    </div>

    <!-- grid item, containing a card -->
    <div class="grid__item grid__item--2">
      ...
    </div>

    <!-- grid item, containing a card -->
    <div class="grid__item  grid__item--3">
      ...
    </div>

</div>

You can create as many cards as you wish; for this post, we are going to use 7. Each card has a thumbnail which will contain a background image later. The we have an article tag which houses our <h1>, <span> and possibly a <p> for more information.

Styling our grid

Let's start off by creating our grid and arranging the grid items.

Note: If this is your first time jumping into Grid then I recommend you first check out my post briefly explaining Grid, or for more in depth detail check out the guides over on tutsplus.

We shall create these cards using a mobile-first approach so our first lot of styles will give our wrapper a width and centre it, then we shall apply some Grid rules:

.grid {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

Right off the bat we are setting our grid state via display: grid;. We are then defining how many columns to set, by declaring grid-template-columns: 1fr;. This states that each column will take up a single fraction of the space available. We’ve only declared one column for now, so our column will fill the whole width.

To define our rows we will state grid-template-rows: auto;. This is actually the default value so we don't really need to include this, but for tutorial purposes we shall stay with. This default value simply means that the height of the rows is determined purely by the content.

Article notifications: Get notified on your device when I publish a new article.