Flexbox vs CSS Grid

The purpose of this blog post is to compare and contrast Flexbox and CSS Grid. These are a few points for comparison:

  • How to conceptualize and plan layout
  • Ideal use case scenarios
  • Ease of use

Caveat: My approach to web development is fairly quick and dirty, having come from more startup type experiences (as Tech Writer and FE Dev contractor) than not. As a result, my biases are towards learning the minimal concepts necessary to get about 80% typical use cases done.

How to Conceptualize/Plan Layout with Flexbox

When planning out one responsive layout design in both Flexbox and CSS Grid, I felt like the main difference for thinking about Flexbox were the ideas of:

  • content container
  • how data should flow through a content container

These are some sketches used to visualize how the grid content would flow across breakpoints.

wireframe for flexbox design (mobile)

Wireframe sketch for flexbox responsive design (mobile)

wireframe sketch for flexbox design (tablet)

Wireframe sketch for flexbox responsive design (tablet)

wireframe sketch for flexbox design (desktop)

Wireframe sketch for flexbox responsive design (desktop)

By scanning the planning sketches hopefully you could get an idea that all that was necessary was to:

  • understand the number of columns per view (also the relative proportion of space needed by each column)
  • understand how content should lay out within the column
  • understand how the repeating pattern of data should display

How to Conceptualize/Plan Layout with CSS Grid

For CSS Grid, I felt like it was more important to sketch out a precise grid, as though the webpage were like a piece of graph paper and I had to lay out the skeleton that would support the content.

wireframe for CSS grid design (tablet)

Wireframe sketch for responsive CSS grid design (tablet)

Note: To be technically correct for a 2 column grid with margins (far left and far right), this should be a 4 column diagram. The far left and far right columns would actually be empty spacers. The resulting vertical line count would be 1-2-3-4-5.

TODO: redraw the grids with proper columns

 

Ideal Use Case Scenarios

My belief is that flexbox is a better choice when the required grid is relatively simple and when the data to be displayed is dynamic (for example, coming from a database and the total number of records returned from a query is not always constant).

On the other hand, if the required grid is relatively complex and the desired design layout needs to be pixel perfect, CSS Grid allows for a more granular level of control. Also if the data to be displayed is static, CSS Grid could be an option.

Ease of Use

Generally my preferred tool would be flexbox because the same CSS would easily scale to a dynamic size of data.

In contrast, I felt with CSS grid, there would be a bit of calculation and scripting required to make the CSS able to support a dynamic size of data. See CSS in the sample source (about line 60 and later).

What do you think? If it seems like CSS grid is more versatile, please explain your use case in the comments.

Examples

Flexbox example: Demo | Source

CSS Grid example: Demo | Source

 

Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

https://gridbyexample.com/ (not used for this article but a good one)

For Flexbox resources, please see a previous article.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s