Grid vs Flexbox

Introduction

In a previous blog, I mentioned the difference between Grid and Flexbox being a two dimensional VS a one dimensional difference. But I didn't elaborate, and today I would like to take the chance to.

Grid

The Grid in CSS works in two dimensions at the same time. This means that it works on both the X and Y axis. If you remember the grids from way back in grade school, it actually turned out to be a great representation of this concept while simultaneously being EXACTLY that.

Flexbox

Flexbox in CSS works in one dimension at a time. Distinct from Grid, it only works on either the X axis OR the Y axis.

How are they similar?

Grid and Flexbox both are able to operate based on columns and rows. Where the Grid represents itself as two-dimensional and Flexbox as one dimensional, these properties operate independently regardless of whether we set the items within them as a column or row.

I found a personal use that sets them apart on my personal portfolio where I display my skills. I used Grid since it did what Flexbox can't... to my knowledge. Please correct me if I'm wrong on this.

There is a property with grid that I used grid-template-rows: 1fr 1fr 1fr which each stand for a fraction of the row space. There's some math involved in the background, but let's just leave at this: There are three items in one row, and they each take up 33.33333% of the total width of the grid container.

Flexbox offers another property called flex-wrap: wrap which would allow for items to wrap to the bottom row when the screen is resized. Although we would provide a similar setup, Flexbox is operating on one dimension. Ultimately, I could not get the behavior I was seeking just using Flexbox.

Conclusion

Grid and Flexbox have their unique purpose in CSS. There could be an entire book we could write on using them individually or together, but I'll save your eyes. 😉 I'd like to give a disclaimer that I am not an expert in CSS, but I'm eager to keep learning about the technical concepts. Please share your thoughts in the comments.

Happy holidays, everyone!

Comments

[LucasAlt]

Technically, you can use flexbox to make tables, but grids bring simplicity when you start doing complicated things.
With time, I was able to establish a few rules:

• Flexbox are mainly used to structure the page and format simple components (a contact form or a navigation bar).
• And Grid are used for more complex components.

I know that before the arrival of the grid property, we used tables and applied particular styles to make nice tables but it was long, tedious and ugly (in the code).