Grid or Flexbox? Ask One Question

One thing I have been working on with my Year 1 students is getting them to think about a layout before they start writing CSS.

Knowing how to write display: flex or display: grid is one thing. Knowing why you are choosing one over the other is a different skill.

When I am building a page, I usually look at the section I am working on and ask myself a pretty simple question:

Am I trying to control the layout in one direction or two directions?

That usually gives me a good starting point.

If I am working in one direction, I usually start with Flexbox.

If I am looking at elements that need to sit next to each other in a row, stack in a column, have space between them, or stay aligned together, Flexbox is usually where I go first.

A good example would be the bottom of a product card. Maybe I want the price on the left and a button on the right.

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

I am really only concerned with how those elements relate to each other across one direction. Flexbox handles that well without making the layout more complicated than it needs to be.

If I am controlling rows AND columns, I start thinking about Grid.

Grid becomes much more useful to me when I am looking at the bigger structure of a layout.

If I have multiple columns, multiple rows, different sections of a page, or elements that need to span across parts of the layout, I am probably going to use Grid.

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "left   main   right"
    "footer footer footer";
}

This is one of the reasons I like grid-template-areas. I can almost look at the CSS like a wireframe. I can see where the header, content, sidebars, and footer belong before worrying about everything inside of them.

Sometimes I use both.

This is probably the biggest thing I want my students to understand.

Choosing Grid does not mean the entire website needs to use Grid. Choosing Flexbox does not mean everything inside the page needs to become a Flexbox container.

I might use Grid to create the overall page layout and then use Flexbox inside one of those Grid sections.

For example, Grid might control where a product card sits on the page, while Flexbox controls how the price and button are positioned inside that card.

They solve different layout problems, and they work really well together.

And sometimes I don't need either one.

This is another thing I try to check before adding CSS.

HTML already has a natural flow. A heading followed by a paragraph followed by another paragraph is already going to stack vertically.

If that is the layout I want, I don't need to immediately add:

display: flex;

or

display: grid;

Sometimes all that section actually needs is some margin, padding, width, or other basic styling.

That is the workflow I want my students to start developing:

Look at the layout first. Figure out what you are trying to control. Then choose the CSS tool that solves that problem.

For me, the starting questions are usually:

• Am I controlling one direction? → Flexbox

• Am I controlling rows and columns? → Grid

• Does normal HTML flow already give me what I need? → Maybe neither

• Do different parts of the layout have different needs? → Use both

The goal isn't just knowing the syntax for Grid and Flexbox. It is being able to look at a wireframe or design and explain why you chose one in the first place.