CSS Grid vs Flexbox

This week’s blog will not be part of my JavaScript Data Structures series. Instead, I’ll be discussing a common question about CSS — what is the difference between CSS Grid and Flexbox?

It took me a bit to understand the concepts and mechanisms of both, but with a lot of YouTube tutorials and Googling, I learned that they are both very useful tools (both independently and together) when building your frontend!

CSS Grid

To start off, CSS Grid is a tool developed in CSS specifically to help developers build the layout of a website. It works two-dimensionally, meaning you can set things both horizontally and vertically.

To use CSS Grid, you have to input a number of things in your CSS file:

• display: grid; to define the container element as a grid
• grid-template-columns and grid-template-rows to set the sizing of each block in the grid, adjustable to however you like
• grid-column and grid-row as the child elements

For the purpose of this blog post, I will not discuss the individual details of how to use CSS Grid. A bit confusing, I know, but this source is a great example to see how they all work.

Flexbox

Flexbox is another CSS tool that allow developers to work with the layout of a website. However, Flexbox only works one-dimensionally, meaning a certain container/element can have flex set to either horizontal or vertical but not both.

To use Flexbox, you would also have to input a number of things in your CSS file:

• display: flex; to define the container as a Flexbox
• flex-direction will be set to either row or column. Row is the default, and it will set your elements left to right. Column will set your elements top to bottom. There are other values you can use like row-reverse or column-reverse, which will set your elements right to left or bottom to top, respectively
• justify-content allows you to define the alignment along the main axis
• and commonly, flex-wrap allows you to set whether you want your items to wrap around if the screen size changes according to your dimensions.

There are also a number of other properties you can utilize with Flexbox, but again I will not be discussing them in detail here. Refer to this source for a more detailed explanation!

The Main Difference

If you haven’t figured it out already, there is one huge difference between CSS Grid and Flexbox. It’s the fact that CSS Grid works two-dimensionally while Flexbox only works in one dimension.

Despite the name of Flexbox, CSS Grid does have a bit more ~flexibility~ in terms of how to set the layout of your website.

However, you can use both CSS Grid and Flexbox at the same time! This actually is super useful because you may want certain things in certain grids to look a certain way, which can be utilized with the other tool.

I think this video does a great job of comparing the two and showing how you can use both tools at the same time!