Use instances for each
However, the query looms: When would you utilize a CSS Grid module over Flexbox and vice versa? That’s the query we try to reply, together with telling you extra about their distinctive strengths!
The largest distinction between Flexbox and Grid is dimensionality. Flexbox is a one-dimensional format system that may maintain content material in rows or columns and the content material shrinks or stretches based mostly on the realm/part it’s in.
On the opposite hand, Grid is a two-dimensional format system, the place content material could be displayed in rows and columns, however it has extra of a inflexible construction. To dive extra into the variations and similarities, let’s have a look at a number of examples with corresponding HTML and CSS.
Table of Contents
Example 1: Flexbox vs. Grid
In this instance, we organize 5 parts, named First, Second, Third, Fourth, and Fifth, utilizing each Flexbox and Grid layouts. First, we’ve Flexbox, and right here within the “wrapper.css” file we assign Flex properties utilizing “display: flex” and “flex: 1 1 150px,” setting the scale of the containers to be 150px.
The property “flex-wrap: wrap”, permits the weather to wrap over to the subsequent row as soon as the present row is full (keep in mind once more, Flexbox is a one-dimensional format system).
Our ensuing format ought to look one thing like this:
As could be seen, First, Second, and Third refill as a lot area as they will given the constraints within the code, and Fourth and Fifth wrapped over to the subsequent row. They additionally crammed up the entire row due to the “flex-wrap” property.
But as a substitute, what if we wish Fourth and Fifth to line up beneath First and Second? This is the place Grid, the two-dimensional format system, is available in.
Grid arranges containers in the identical manner you’d create a desk, with the identical measurement and construction. Below, within the corresponding HTML and CSS, “display: grid” defines the Grid format, and the “grid-template-columns: repeat(3, 1fr)” property locations three containers in a single row after which goes to the subsequent row.
Our ensuing format now appears to be like like:
As promised, Grid mimics a table-like construction and positioned the primary three objects in a row and strikes to the subsequent one in a table-like method. Grid permits us to align parts higher and in a extra structured manner, as could be seen above, nevertheless it’s extra inflexible than Flexbox, since Flexbox would try to fill the empty area on the finish that may be seen above.
Example 2: Flexbox vs. Grid
Another container association instance highlighting the distinction between Grid and Flexbox is proven under, the place the containers have different-sized textual content in them.
In the primary instance with Flexbox, there are additional margins added since there are not any default margins (utilizing “margin: 0.5rem”) for flex containers, together with additional padding between the containers utilizing “padding: 3rem.”
The ensuing format appears to be like like this on a wider show:
And like this on a narrower show:
Again, as exhibited earlier than, we will see the flexibleness and one-dimensionality in Flexbox.
First, Flexbox makes an attempt to refill as a lot info as attainable in a single row then wraps over to the subsequent one. Second, the container with the lengthy content material is just not the identical measurement as the opposite 5 containers.
Flexbox container sizes rely upon the content material they maintain moderately than their construction (which is the case for Grid), permitting higher flexibility in displaying content material.
How would Grid show this? Here’s the code:
And the ensuing format on a wider display:
And a narrower display:
As seen earlier than in Example 1, Grid’s format mimics that of a desk with each container the identical measurement.
In the instance above, some properties reminiscent of “grid-auto-columns: minmax(15rem, auto)” and “grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))” have been used to make the Grid format a bit extra dynamic, as could be seen within the wider display with field 5 being shorter, however we nonetheless can’t obtain the identical flexibility as Flexbox, although we do get a very good inflexible construction.
Putting it into play
As you go about your personal journey in exploring and utilizing Flexbox and Grid layouts, there are particular vital parts and properties to remember for each.
For Flexbox, within the examples above, the containers have been organized in rows since, by default, the property “flex-direction” is about to “row” and goes proper to left. This can simply be modified by including “flex-direction: column.”
Another vital property to remember is “flex-wrap”, which is about to “nowrap” by default, the place objects will organize themselves in particular person rows on the display.
Setting this to “wrap”, as within the examples above, has the objects organize themselves in a single row as a lot as attainable after which wrap over into the subsequent one, and equally, setting this to “wrap-reverse” will wrap onto a number of rows from the underside to the highest.
Yet one other vital property to be highlighted, given the examples above, is “justify-content.”
This is about to “flex-start” by default, the place objects are pushed to the beginning of the row and there’s some additional area, just like Grid, however setting this to “justify-content: space-evenly” fills up empty area and arranges containers accordingly.
These are only a few of numerous vital properties that are useful to get a very good begin at enjoying round with Flexbox and perceive its makes use of.
Similarly, Grid has its personal suite of vital properties to know and begin with.
For any merchandise, the “grid-area: X, Y, span 1, span 2” property is extraordinarily vital because it specifies to start out an merchandise on row X, column Y, and span 1 row and a pair of columns.
The “grid-auto-columns” and “grid-auto-rows” properties set the default sizes of columns and rows within the grid, whereas, just like “grid-area”, the properties “grid-column: 1, span 2” and “grid-row: 1, span 2” can be utilized to make an merchandise begin on column/row 1, and span 2 columns/rows respectively.
Additionally, there could be gaps set in the entire grid construction utilizing “gap: Xpx Ypx” defining the row and column gaps. Copy the code above and take a look at these out to see how they might have an effect on the layouts above!
Conclusion: Which one is finest?
So, Grid or Flexbox? As proven above, there isn’t any clear winner; each have their very own advantages and downsides and provide distinctive strengths. Flexbox supplies flexibility in displaying your content material that may be helpful in some instances, whereas Grid supplies good and inflexible construction, that itself could be helpful in different instances.
If you need to develop a web site with extra dynamic content material, the place positioning of the content material is just not as vital, Flexbox could be the way in which go. Otherwise, if you wish to show a extra inflexible, table-like construction with content material, Grid could be your finest wager.
And on the finish of the day, each Flexbox and Grid could be personalized with extra properties, so you may get a extra inflexible construction with Flexbox, or a extra versatile, dynamic construction with Grid.
Think of them as spoons and forks, each have their very own distinctive use instances, however you should utilize one instead of the opposite. This highlights the fantastic thing about CSS itself, giving us many unbelievable choices to type and customise our content material and format in many various methods. Do you like utilizing Grid or Flexbox, or each? Let us know!