level up some UI chops

CSS Grid Beats Flexbox for Full Page Layout

full page CSS Grid

Part 1 of the Flexbox or Grid? series.

Ahh that sweet moment when you and your new app have your first style together:

.app {

}

But now what? Should you build your app’s main container layout using Grid or Flexbox?

Honestly you could pull it off with either. But the new CSS Grid layout has some big advantages over Flexbox when it comes to building a full page layout. Let’s take a look.

Control In Both Directions

With Flexbox you have to choose which way your flex container flows: up, down, left or right. Your flex items are placed into the flex container until there’s no more room for them all, and then based on their flex-basis will either shrink, overflow, or wrap. You can mimic a two-dimensional layout using flex-wrap, but you don’t have nearly as much control over the lines as Grid gives you. You also run into problems with getting the correct spacing for items on the last line since each flex line behaves as its own separate flex container for spacing and alignment.

Grid layout gives you a lot more power and control. Here’s an example that creates a Grid of two equal sized columns, a 100px header and footer, and flexible space in the middle. With just a couple line of CSS we’re able to tell the blue item to take up two columns, and the purple item to take up two rows:

See the pen by Dave Geddes (@geddski) on CodePen.

Once you get the hang of Grids, two dimensional layouts like this are a snap.

Flexbox Takes More Rules, Divs, Work

The example above could have been built with Flexbox, but it would require a lot more to make it happen. What the heck, let’s build the example again in Flexbox just to see the difference:

See the pen by Dave Geddes (@geddski) on CodePen.

We got it, but not without adding four extra divs, 5 extra style rules, and having to use 5 flex containers (with varying directions) as opposed to just 1 grid container.

Start With a Grid

CSS Grid layout was designed for this kind of thing, and it shows. These days it makes a lot of sense to start new apps & full page layouts with a Grid. Here are a couple Happy Little Divs videos that show how well Grid works for the Zelda UI and the Overwatch UI.

If you want to become a master of Grid layout check out my Grid Critters story course.

Challenge

Start building that side project idea you’ve been meaning to do forever, using the brand new CSS Grid layout.

The Future of Layout is Here

Master CSS Grids right from the start by playing this new interactive Story Course. You'll learn the ins and outs of Grids one fun level at a time, while saving an adorable alien life form from certain destruction.