A solid understanding of Flexbox and CSS Grid is necessary if you want to build stunning, responsive websites.
You might even have used one or both to some degree.
They’re both powerful parts of CSS, with similar but subtly different use cases.
What Is Flexbox?
Flexbox is a one-dimensional CSS layout method that’s been around for a while now.
Before Flexbox, this key in of layout required frustrating and unwieldy use of the float andposition properties.
If you’re worried about surfing app support for Flexbox, don’t be.
According tocaniuse.com, all modern browsers support Flexbox.
The Basics of Flexbox
WhileFlexbox includes many CSS properties, the basics are pretty simple.
Using Flexbox always starts by declaring a parent container as a flex-container by addingdisplay: flexto its style rules.
Doing this automatically makes all children of this element flex-items.
After that, you’re able to control the distribution of space within the flex-container using thejustify-content property.
it’s possible for you to control the alignment of flex-items with thealign-itemsproperty.
CSS Grid is a layout system that’s complementary to Flexbox.
Flexbox is powerful, but not very suited for certain types of layouts.
CSS Grid is not a Flexbox replacement, but rather an alternative system for some situations.
The Basics of CSS Grid
The concept of Grid is simple.
Start by addingdisplay: gridto the parent container.
Then use thegrid-template-rowsandgrid-template-columnsproperties to specify the rows and columns you want to split the grid into.
Which One Should You Use?
Flexbox is best suited to building layouts that involve aligning and distributing elements on a single line.
If you’d used Flexbox for this, you would have to resort toposition: relativeor something similar.
Using Grid, all you need is to shift thegrid-columnproperty.
Grid is obviously less suited for that kind of layout.
While Flexbox and Grid can mostly replicate each other’s effects, there are some exceptions.
Making elements overlap is pretty hard with just Flexbox but is very easy with Grid.
Grid is best for two-dimensional layouts with many elements that need to be precisely positioned relative to each other.
