Leading Differences for choosing between CSS Grid and Flex

Layout in CSS has come a long way, and it's still evolving! While we used hacks, first in HTML with tables and then in CSS with floats, to create the most elaborate things, nowadays we have dedicated layout concepts to describe our layouts with CSS in the form of CSS Grid and Flex Layout. While they share some properties and concepts, they have different purposes. So when it comes to choosing one over the other, we can actually rely on a number of leading differences.

The term "Leading Difference" attempts to semantically translate Niklas Luhmann's idea of "Leitdifferenz". They represent key differences that can be used to sort things into dichotomies. So whether something is usable/unusable, good/not good. In this post, we're attempting to explore, at what some Leading Differences could be referred to, in order to decide between using CSS Grid and Flexbox. Let's explore some of them!

Layout in one dimension, or layout in two dimensions?

CSS Flex was designed for laying out elements in a single dimension. Properties determine how elements are placed along the main and cross axes, and by default, elements will not wrap into new lines.

The CSS Grid is different. Elements placed will automatically be placed into the next row, if the available columns don't have enough space any longer. Not only that, but we're using properties to define how elements are placed in a container along two dimensions: rows and columns.

This is the most true-to-spec difference when choosing between flex and grid. Do you need to define whether elements are laid out vertically or only horizontally? Choose Flex. Do you need to define both things? Choose Grid.

Determined by content or determined by layout?

Another way of thinking about this is to ask whether you need to define and almost prescribe the layout of elements, or if you want the elements themselves to be the source of that information.

In CSS Grid, we define columns and rows with grid-template-columns, grid-template-rows, and grid-template-areas explicitly or implicitly with grid-auto-flow, grid-auto-columns and grid-auto-rows. This makes it the right use case for when we need to define a specific layout for a specific container, in which its children will fit accordingly.

Whereas with flex, we only define how elements behave in this specific container, but their sizing is entirely determined by themselves. Instead of defining tracks for elements to go into, we tell the elements themselves how much relative space they can take up with flex-basis, flex-grow, and flex-shrink. Rachel Andrew describes it as "working from the content out vs. working from the grid definition in."

Single sources of truth for layout definitions

There is one interesting possibility that may also be an important reason for choosing one over the other. Because rows, columns, and entire areas are being expressed as values, they can also be passed down with CSS Grid. meaning that we can share layout definitions across an entire site by declaring a custom property with definitions for columns, rows, and even entire areas.

This means, that we can express layout information in a single value, even as a Design Token. We cannot do that with CSS Flex because it works from the content up, not from the layout down.

It can be really helpful to have a specific difference to look out for that will help you decide what the right layout method is for your needs. CSS Grid is in many ways much more powerful than Flex, but a comparison is not always appropriate. Both approaches serve in many ways different purposes, even if their result may be the same.

But because we're programming declaratively in CSS and not imperatively, the way we describe our layout matters a lot. Because it expresses how we reason about. And it also cements where we locate the source of truth for a given layout choice. Is it the elements themselves, or are we defining it in the container? Are we describing how layout is supposed to look in two dimensions or just in one dimension?

Happy Layouting!

Further Reading:

• Rachel Andrew's: "Should I use Grid or Flexbox?"

• Chris Coyier's: "Quick! What's the difference between Flexbox and Grid?"

• Learn Grid by playing this little game: https://cssgridgarden.com/

• Stephanie Eckles': "Container Query Solutions with CSS Grid & Flexbox" and "Keep the Footer at the Bottom: Flexbox vs Grid"

• MDN: "Auto-placement in grid layout"