Flexbox vs. CSS Grid: Which Should You Use?

CSS grid basics

The grid concept is simple. As the name suggests, CSS Grid allows you to divide the space within a parent container into a grid of rows and columns. Any number of rows/columns can be used. Then position the child items by referencing the lines of the parent’s grid.

Start by adding Display: Grid to the parent container. next, grid template row When grid template column Use properties to specify the rows and columns that divide the grid. after that, grid column When grid row Use child element properties to tell where it should be in the grid. Let’s look at an example grid that uses the previous five-element setup. However, it has 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 > .two {
grid-row: 2;
grid-column: 2;
}
 

Here is the output:

CSS Grid also includes many other properties that can be used to build more complex layouts.

Which should I use?

First, it’s important to note that nothing prevents using Flexbox and Grid together, and in some cases it’s the best choice. That said, let’s answer the question, which layout is the most suitable for implementing each of these systems?

Flexbox is great for building layouts that arrange elements side by side. Examples of this kind of layout include placing icons at the end of a section and placing links in the navigation bar.

Grids, on the other hand, are most effective when elements need to be positioned precisely relative to other elements (both horizontally and vertically), and are used to easily adapt to different screen sizes. Placement required.

As an illustration, here is the code you would need to write to recreate the layout from the Grid example using 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> 

CSS:

 .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;
} 

Here is the output:

The main thing to note here is that this code produces the same output as the Grid example, but the markup here is much more complex. Implementing this layout requires a subcontainer, and the numbered divs must be placed out of order within the markup.

Further suppose that this layout needs to be moved to an awkward position. For example, align the 5th div with her 2nd div.If you were using Flexbox for this, you’d have to resort to Position: Relative or something similar.With grid, all you need is grid column property.

But in contrast, implementing a simple one-row alignment from the Flexbox example using a grid would require much more CSS. Grids are obviously not very suitable for such layouts.

Flexbox and Grid are powerful layout systems

Both Flexbox and CSS Grid are design systems that make it easy to lay out web page content. Grids are ideal for two-dimensional layouts that contain many elements that need to be positioned precisely relative to each other. Flexbox works well for one-dimensional or one-row layouts that require a set of elements to be arranged in a particular way.