Flexbox and CSS Grid are two CSS structure modules which have turn out to be mainstream in recent times. When to make use of which, is one other query nonetheless.
Each permit us to create advanced layouts that have been beforehand solely attainable by making use of CSS hacks and/or JavaScript. Flexbox and CSS Grid share a number of similarities and lots of layouts might be solved with each. Let’s see if we are able to make clear when you need to use Flexbox and when you need to use CSS Grid.
Business Recap
The CSS Grid vs. flexbox debate is presently the most popular subject within the CSS group. Should you observe business information you should have seen many nice articles seem currently, resembling:
- Rachel Andrew blogged on the question already again in 2016 and later continued discussing it in more detail.
- Final month, Chris Coyier began a viral Twitter thread that ended up in a longer article with some cool code examples on CSS-Methods.
- Michelle Barker additionally responded to Chris’ Twitter thread by authoring one other wonderful Grid vs flexbox article in her standard CSS {In Actual Life} weblog.
- The MDN Group has created some thorough docs on the essential variations between Grid and flexbox, which is presently the most effective accessible documentation on the topic.
- An article by Geoff Graham discusses how the developments in CSS, together with Flexbox and Grid, have influenced modern CSS writing practices. It sheds mild on the options which have had essentially the most impression on present CSS approaches, providing insights into the continued evolution of CSS design and coding.
You too can discover many different associated weblog posts, articles, movies, and discussions all around the net. As the subject is more likely to keep related sooner or later, I’d advocate studying a number of the articles above and growing your stance on the query, as nothing is ready in stone but.
Right here’s one other take.
One vs. Two Dimensions
An important factor to know if you be taught flexbox is that it is one-dimensional, whereas CSS Grid is two-dimensional. Flexbox lays out objects alongside both the horizontal or the vertical axis, so it’s a must to determine whether or not you need a row-based or a column-based structure.
A flex structure can even wrap in a number of rows or columns and flexbox treats every row or column as a separate entity, primarily based on its content material and the accessible house.
Then again, CSS Grid helps you to work alongside two axes: horizontally and vertically. Grid permits you to create two-dimensional layouts the place you may exactly place grid objects into cells outlined by rows and columns.
That is how W3C desires us to make use of flexbox and Grid, nonetheless, apply ceaselessly overrides idea, and never everyone seems to be a fan of the one-dimensional vs. two-dimensional narrative. As an example, Chris Coyier made the next assertion in his aforementioned article:
“I am not the world’s greatest fan of the “1D” vs. “2D” differentiation of grid vs. flexbox, solely as a result of I discover most of my day-to-day utilization of grid is “1D” and it is nice for that. I would not need somebody to assume they’ve to make use of flexbox and never grid as a result of grid is just if you want 2D. It’s a robust distinction although that 2D structure is feasible with grid although in methods it’s not in flexbox.”
And, that is how CSS works in actual life. We are able to create two-dimensional layouts with flexbox (as a consequence of its wrapping skill) and one-dimensional layouts with CSS Grid (as a consequence of its auto-placement skill), too.
Though flexbox is initially not for constructing grids, it’s ceaselessly used that manner. The most effective instance is Bootstrap 4’s grid system which relies on flexbox. All Bootstrap 4 websites on the market makes use of flexbox to perform two-dimensional layouts, consisting of rows and columns. And, there are different standard instruments resembling Flexbox Grid that do the identical.
When to Use Flexbox vs Grid
The most typical false impression in regards to the two structure modules is that Grid is for full-page layouts and flexbox is for smaller elements. This isn’t the case in any respect. All of the authors talked about above warn in opposition to this method, as it could actually significantly restrict prospects. You’ll want to assess every structure individually on a case-by-case foundation to choose the higher choice.
Concentrate on Content material Placement: CSS Grid
CSS Grid focuses on exact content material placement. Every merchandise is a grid cell, lined up alongside each a horizontal and a vertical axis. If you wish to precisely management the place of things inside a structure, CSS Grid is the best way to go. The W3 docs of the Grid module assert:
“It supplies a mechanism for authors to divide accessible house for structure into columns and rows utilizing a set of predictable sizing behaviors. Authors can then exactly place and dimension the constructing block components of their utility into the grid areas outlined by the intersections of those columns and rows.”
With flexbox, it’s laborious to foretell conduct at sure viewports and you will get stunning outcomes. After all, you may set the widths and heights of flex objects or make use of the calc() operate however you then lose flexbox’s important attraction: flexibility.
This isn’t the case with CSS Grid. It has properties resembling grid-template-rows and grid-template-columns and utilities just like the fraction unit that allow you to exactly calculate the whole lot. Therefore, Grid is particularly appropriate for creating uncommon layouts like broken, asymmetrical, and overlapping layouts.
CSS Grid additionally makes it attainable to create responsive layouts with out utilizing media queries. The concept comes from Heydon Pickering who lately revealed a YouTube video about algorithmic layouts. He introduces a easy Grid approach that makes grid cells wrap and adapt to any viewport sizes:
1 |
.container { |
2 |
show: grid; |
3 |
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); |
4 |
grid-gap: 1rem; |
5 |
}
|
Though the structure wraps primarily based on the accessible house, it’s nonetheless not content-aware like flexbox, because the content material contained in the objects doesn’t flexibly stretch out:
Concentrate on Content material Move: Flexbox
Flexbox focuses on content material circulation somewhat than content material placement. Widths (or heights) of flex objects are decided by the content material of the merchandise. Flex objects develop and shrink in accordance with their interior content material and the accessible house. That is how W3C’s flexbox docs clarify the targets of the structure module:
“… (flexbox) beneficial properties easy and highly effective instruments for distributing house and aligning content material in ways in which net apps and complicated net pages typically want.”
Briefly, flexbox lets you allocate house and align objects flexibly. Let’s see how Heydon’s grid would appear to be with flexbox. The next code provides a margin of 0.5rem to every flex merchandise (as flexbox doesn’t have a spot property, we have to use the damaging margin hack).
1 |
.container { |
2 |
show: flex; |
3 |
flex-wrap: wrap; |
4 |
margin: -0.5rem; |
5 |
}
|
6 |
.merchandise { |
7 |
margin: 0.5rem; |
8 |
}
|
As you may see under, the primary flex merchandise with the lengthy content material stretches out so far as wanted:
After all, you can also make fix-width flex objects utilizing the width or flex-basis properties. Nevertheless, in case you achieve this you lose flexbox’s content-awareness which is the primary purpose for its existence. You too can see above that flexbox treats every row independently. Totally different rows align flex objects otherwise, primarily based on the quantity of textual content inside them. There are not any columns right here and this isn’t a grid however a one-dimensional structure.
Flexbox additionally permits you to determine how your content material ought to behave when there’s an excessive amount of house or not sufficient house on the display. I wrote in regards to the subject intimately in my article about flexbox sizing. Utilizing the flex-grow and flex-shrink properties, you may obtain a totally fluid structure that optimizes the allocation of flex objects at each viewport dimension.
There are different typical use instances of flexbox as nicely, resembling centering items, adjusting the last item(s) of lists, sticking the footer to the bottom of the page, and creating responsive menus. You’ll find much more flexbox utilization examples within the MDN docs.
Browser Assist for Flexbox vs CSS Grid
Flexbox has good browser support, whereas CSS Grid is not supported by IE11- and Edge 15-.
Articles ceaselessly advocate utilizing flexbox as a fallback for CSS Grid, nonetheless many builders contemplate it an excessive amount of problem and would somewhat create their layouts completely with flexbox.
However flexbox isn’t good, both. It has a few points being collected within the Flexbugs repo on GitHub (with cross-browser workarounds for the bugs). Should you stumble upon a problem whereas working with flexbox it’s price taking a look at this record, as you would possibly discover the answer to your downside.
