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!
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-rowsto set the sizing of each block in the grid, adjustable to however you like
grid-rowas 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 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-directionwill 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
column-reverse, which will set your elements right to left or bottom to top, respectively
justify-contentallows you to define the alignment along the main axis
- and commonly,
flex-wrapallows 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!