Css style

Flexbox vs CSS Grid: Which to Use?

A solid understanding of Flexbox and CSS Grid is necessary if you want to create stunning and responsive websites.


If you’ve been writing CSS for a while, chances are you’ve at least heard of these terms. You might even have used one or both to some extent. These are two powerful parts of CSS, with similar but subtly different use cases.


What is Flexbox?

Flexbox is a one-dimensional CSS layout method that has been around for a while now. You can think of Flexbox as a set of related CSS properties that you can use to align HTML elements in a container and manage the space between them.

Prior to Flexbox, this type of layout required frustrating and unwieldy use of the float and position properties.

If you’re worried about Flexbox’s browser support, don’t be. According caniuse.comall modern browsers support Flexbox.

Flexbox Basics

While Flexbox includes many CSS properties, the basics are pretty straightforward. Using Flexbox always starts by declaring a parent container as a flex-container by adding display: flexible to its rules of style. Doing this automatically makes all children of this flex-items.

After that you can control the distribution of space in the flex-container using the justify-content property. You can control the alignment of flex items with the align elements property.

Here is a sample code that uses Flexbox to evenly distribute a container’s space among its children and align them all to the center of the container. This is the HTML:

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

This is the CSS:

.container {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
border: 1px solid black;
height: 200px;
}

.container > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}

And here is the output:

What is CSS Grid?

CSS Grid is a complementary layout system to Flexbox. Flexbox is powerful, but poorly adapted to certain types of layouts. Trying to lay out the structure of an entire page with Flexbox will end up being a frustrating task involving ugly, non-sematic markup and hacky CSS.

CSS Grid is not a replacement for Flexbox, but rather an alternate system for certain situations.

CSS Grid Basics

The Grid concept is simple. As the name suggests, CSS Grid lets you divide the space of a parent container into a grid of rows and columns, with any number of rows/columns you want. After that, you specify the position of the child elements by referencing the rows of the parent’s grid.

Start by adding display: grid to the parent container. Then use the grid-pattern-lines and grid-model-columns properties to specify the rows and columns into which you want to split the grid. You can then use the grid-column and grid line properties on the child elements to tell them where they should be in the grid. Let’s look at an example grid that uses the five element configuration from before, but in a more complicated arrangement.

Here is the HTML:

<div class="container">
<div>1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>

Here is the CSS:

.container {
display: grid;
width: 100%;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
border: 1px solid black;
height: 300px;
}

.container > div {
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}

.container &gt; .two {
grid-row: 2;
grid-column: 2;
}

Here is the output:

CSS Grid also includes many other properties that you can use to create more complex layouts.

Which should you use?

First, it’s important to note that there’s nothing stopping you from using Flexbox and Grid together, and in some cases, that’s the optimal choice. That said, let’s answer the question of which provisions each of these systems is best suited to implement.

Flexbox is best suited for building layouts that involve aligning and distributing items on a single line. Examples of this type of layout are the alignment of icons at the end of a section or the arrangement of links in a navigation bar.

The grid, on the other hand, shines the most when you need to precisely position elements relative to each other (both horizontally and vertically), and you need this positioning to easily adapt to different screen sizes.

To illustrate, here is the code you would need to write to recreate the layout from the Grid example with Flexbox.

HTML:

<div class="container">
<div class="sub one">
<div>1</div>
<div>5</div>
</div>

<div class="sub two">
<div>2</div>
</div>

<div class="sub three">
<div>4</div>
<div>3</div>
</div>
</div>

The CCS:

.container {
border: 1px solid black;
height: 300px;
}

.sub {
display: flex;
width: 100%;
}

.one, .three {
justify-content: space-between
}

.two {
justify-content: center;
}

.sub > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}

And here is the output:

The main thing to note here is that although this code produces the same output as the Grid example, the markup here is much more complicated. Implementing this layout requires subcontainers and you need to place the numbered divs out of order in the markup.

Also, suppose you need to move this layout to an awkward position: say, align the 5th div with the 2nd. If you had used Flexbox for this, you would have had to resort to position: relative or something similar. Using Grid, all you need is to move the grid-column property.

But, on the other hand, implementing the simple single line alignment of the Flexbox example with Grid would result in a lot more CSS. Grid is obviously less suitable for this type of layout.

Although Flexbox and Grid can mostly replicate each other’s effects, there are a few exceptions. Overlapping elements is quite difficult with just Flexbox but very easy with Grid. Grid also doesn’t allow elements to move away from other elements with margin:auto like Flexbox does.

Flexbox and Grid are powerful layout systems

Flexbox and CSS Grid are both design systems that make it easy to lay out your web page content. The grid is ideal for two-dimensional layouts with many elements that need to be precisely positioned relative to each other. Flexbox is best for one-dimensional or single-line layouts where you just need to space out a bunch of elements a certain way.