301 Redirect: Flex grids over grits

WebsitesCategory
7 min read
Emaad Paracha

CSS Grid and Flexbox have been gaining popularity these days within the web developing world due to their ease of use and customizability. Both layout options, Grid and Flexbox, allow users to arrange contents of their websites without having to hack around in CSS or JavaScript.

However, the question looms: When would you use a CSS Grid module over Flexbox and vice versa? That’s the question we attempt to answer, along with telling you more about their unique strengths!

The biggest difference between Flexbox and Grid is dimensionality. Flexbox is a one-dimensional layout system that can hold content in rows or columns and the content shrinks or stretches based on the area/section it is in.

On the other hand, Grid is a two-dimensional layout system, where content can be displayed in rows and columns, but it has more of a rigid structure. To dive more into the differences and similarities, let’s look at a few examples with corresponding HTML and CSS.

Example 1: Flexbox vs. Grid

In this example, we arrange five elements, named First, Second, Third, Fourth, and Fifth, using both Flexbox and Grid layouts. First, we have Flexbox, and here in the “wrapper.css” file we assign Flex properties using “display: flex” and “flex: 1 1 150px,"  setting the size of the containers to be 150px.

The property “flex-wrap: wrap”, allows the elements to wrap over to the next row once the current row is full (remember again, Flexbox is a one-dimensional layout system).

Our resulting layout should look something like this:

As can be seen, First, Second, and Third fill up as much space as they can given the constraints in the code, and Fourth and Fifth wrapped over to the next row. They also filled up the whole row because of the “flex-wrap” property.

But instead, what if we want Fourth and Fifth to line up under First and Second? This is where Grid, the two-dimensional layout system, comes in.

Grid arranges containers in the same way you would create a table, with the same size and structure. Below, in the corresponding HTML and CSS, “display: grid” defines the Grid layout, and the “grid-template-columns: repeat(3, 1fr)” property places three containers in one row and then goes to the next row.

Our resulting layout now looks like:

As promised, Grid mimics a table-like structure and placed the first three items in a row and moves to the next one in a table-like manner. Grid allows us to align elements better and in a more structured way, as can be seen above, however it is more rigid than Flexbox, since Flexbox would attempt to fill the empty space at the end that can be seen above.

Example 2: Flexbox vs. Grid

Another container arrangement example highlighting the difference between Grid and Flexbox is shown below, where the containers have different-sized text in them.

In the first example with Flexbox, there are extra margins added since there are no default margins (using “margin: 0.5rem”) for flex containers, along with extra padding between the containers using “padding: 3rem."

The resulting layout looks like this on a wider display:

And like this on a narrower display:

Again, as exhibited before, we can see the flexibility and one-dimensionality in Flexbox.

First, Flexbox attempts to fill up as much information as possible in one row then wraps over to the next one. Second, the container with the long content is not the same size as the other five containers.

Flexbox container sizes depend on the content they hold rather than their structure (which is the case for Grid), allowing better flexibility in displaying content.

How would Grid display this? Here’s the code:

And the resulting layout on a wider screen:

And a narrower screen:

As seen before in Example 1, Grid’s layout mimics that of a table with every container the same size.

In the example above, some properties such as “grid-auto-columns: minmax(15rem, auto)” and “grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr))” were used to make the Grid layout a bit more dynamic, as can be seen in the wider screen with box 5 being shorter, but we still can’t achieve the same flexibility as Flexbox, though we do get a good rigid structure.

Putting it into play

As you go about your own journey in exploring and using Flexbox and Grid layouts, there are certain important elements and properties to keep in mind for both.

For Flexbox, in the examples above, the containers were arranged in rows since, by default, the property “flex-direction” is set to “row” and goes right to left. This can easily be changed by adding “flex-direction: column."

Another important property to keep in mind is “flex-wrap”, which is set to “nowrap” by default, where items will arrange themselves in individual rows on the screen.

Setting this to “wrap”, as in the examples above, has the items arrange themselves in one row as much as possible and then wrap over into the next one, and similarly, setting this to “wrap-reverse” will wrap onto multiple rows from the bottom to the top.

Yet another important property to be highlighted, given the examples above, is “justify-content."

This is set to “flex-start” by default, where items are pushed to the start of the row and there is some extra space, similar to Grid, but setting this to “justify-content: space-evenly” fills up empty space and arranges containers accordingly.

These are just a few of countless important properties which are helpful to get a good start at playing around with Flexbox and understand its uses.

Similarly, Grid has its own suite of important properties to know and start with.

For any item, the “grid-area: X, Y, span 1, span 2” property is extremely important as it specifies to start an item on row X, column Y, and span 1 row and 2 columns.

The “grid-auto-columns” and “grid-auto-rows” properties set the default sizes of columns and rows in the grid, while, similar to “grid-area”, the properties “grid-column: 1, span 2” and “grid-row: 1, span 2” can be used to make an item start on column/row 1, and span 2 columns/rows respectively.

Additionally, there can be gaps set in the whole grid structure using “gap: Xpx Ypx” defining the row and column gaps. Copy the code above and try these out to see how they would affect the layouts above!

Conclusion: Which one is best?

So, Grid or Flexbox? As shown above, there is no clear winner; both have their own benefits and drawbacks and offer unique strengths. Flexbox provides flexibility in displaying your content that can be useful in some cases, while Grid provides good and rigid structure, that itself can be useful in other cases.

If you want to develop a website with more dynamic content, where positioning of the content is not as important, Flexbox might be the way go. Otherwise, if you want to display a more rigid, table-like structure with content, Grid would be your best bet.

And at the end of the day, both Flexbox and Grid can be customized with additional properties, so you can get a more rigid structure with Flexbox, or a more flexible, dynamic structure with Grid.

Think of them as spoons and forks, both have their own unique use cases, but you can use one in place of the other. This highlights the beauty of CSS itself, giving us many incredible options to style and customize our content and layout in many different ways. Do you prefer using Grid or Flexbox, or both? Let us know!