12 October 2021 | get inspired | , , | 0 Comments

CSS Flexbox vs Grid layout

Flexbox and Grid are two CSS layout models that can be used to create complex web application layouts with just a couple of CSS rules.

This tutorial will help you understand the differences between Flexbox and Grid CSS layout models and a recommendation on when to use one over the other.

Let’s start with learning how the Flexbox layout model works, then continue to how the Grid layout model works.

How CSS Flexbox layout works

The Flexbox (or Flexible Box) layout model is a one-dimensional CSS layout model that allows you to create responsive layouts for your web application.

The key feature of the Flexbox model is that it adjusts the layout of your web page automatically based on the size of your content. You only need to define the direction and the wrap behavior of the Flexbox with the flex-direction and flex-wrap properties.

The flexibility of the Flexbox model allows you to distribute unused space between elements that are vertically or horizontally aligned.

Let’s see an example of the Flexbox model in action. First, suppose you have a container <div> element with five child elements as shown below:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
.item {
  background-color: lightblue;
  padding: 1rem;
}

To enable the flexbox layout in your elements, you need to add the CSS display:flex property to your container element as follows:

.container {
  display:flex;
  gap: 20px;
}

With the above CSS, all children of the container element will use the flex behavior for their display. The gap property is added to add some gap between the rows and columns.

In the same container element, you can define the flex-direction property to control the direction of the content:

.container {
display: flex;
gap: 20px;
flex-direction: row;
}

The flex-direction:row property will lay out the content horizontally, while flex-direction:column will stack the content vertically.

Next, there’s also the flex-wrap property that defines the wrapping behavior of the content that is laid out horizontally.

With the flex-wrap property, your content will wrap into the next line when the screen size becomes too small to contain all child elements in the same line:

.container {
  display: flex;
  gap: 20px;
  flex-direction: row;
  flex-wrap: wrap;
}

Let’s adjust the content of the HTML page and add a longer text content for the first item:

<div class="container">
  <div class="item">
    This is a placeholder text to make the column larger. It will show you how the flexbox model adjusts the page item layout based on the size of the content.
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

The Flexbox model allows you to expand the items to fill up the available row space by using flex-grow property.

.item {
  background-color: lightblue;
  padding: 1rem;
  flex-grow: 1;
}

By adding the flex-grow property to the item class, you will find the second row items to expand and fill up the available row space as you make the browser width smaller

Notice how the second column is much smaller than the rest of the columns.

Now that you’ve learned how the Flexbox layout works, let’s continue with learning how the CSS Grid layout works.

How CSS Grid layout works

The CSS Grid layout allows you to create a two-dimensional layout model that is made of rows and columns. It allows you to create a much more rigid layout for your web page that doesn’t change based on the content size.

To help you understand the difference between CSS Flexbox and Grid layout, let’s use the same example above where you have one container element with five children elements.

As you already see above, the Flexbox model allows your content to shape the layout of the web page. If one of your items has a bigger size, then the entire layout would flex to accommodate the different sizes of the child elements.

But what if you want a strictly defined layout where each row has three columns no matter the size of the item?

The Flexbox model doesn’t have the properties to strictly control the layout of the items. To produce a row with three columns, you need to calculate the width of each child element yourself.

Since we have a 20px gap between each element, Let’s calculate the width for each item element as shown below:

.item {
  width: calc((100% / 3) - 60px);
  background-color: lightblue;
  padding: 1rem;
}

Now you should have a three columns layout.

The child items above don’t really fill the whole width of the row because there’s still available space on the right side.

But if you add the flex-grow:1 property to the item class, then the two items on the second row will expand to fill the space, breaking the three-column layout.

This is where the Grid layout comes in. The ability to control the placement of items in a two-dimensional layout helps you to precisely define how your webpage should look.

The following CSS should do the job:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:20px;
}

.item {
  background-color: lightblue;
  padding: 1rem;
}

Now your elements will always be displayed in a three-column layout even when there are only 2 items in the row.

The Grid layout is more rigid and it doesn’t allow the expanding behavior of the flex-grow property to fill up the available row space.

When to use Flexbox or Grid layout for your web application

Now that you’ve learned how both Flexbox and Grid model works, it’s time to learn when to use one or the other for your web project.

The main difference between the Flexbox and Grid layout is that Flexbox creates content-first design while Grid creates layout-first design.

The Flex model looks at your content and then tries to adjust the layout to better fit the whole content on the screen, while the Grid model provides more strict control over the layout that ignores the size of your content.

But rather than thinking of them as competing technologies, you can think of Flexbox and Grid Layout as complementary technologies that you can use together to build a complex web application layout.

You can use the Grid layout with the following HTML markup and CSS style below:

<div class="container">
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>
.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 0.4fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
}

header {
  grid-area: header;
  background-color: lightblue;
}

main {
  grid-area: main;
  background-color: yellow;
}

aside {
  grid-area: aside;
  background-color: lightpink;
}

footer {
  grid-area: footer;
  background-color: lightgreen;
}

Then, you can use the Flexbox layout for aligning the items inside each of those container elements. One common example of using the Flexbox model is to align the <nav> element items as follows:

<header>
  <nav>  
    <ul class="navbar">  
      <li>Home</li>  
      <li>Profile</li>  
      <li>Blog</li>
      <li>Contact</li>  
    </ul>  
  </nav>
</header>

Next, you need to style the above elements using the following style:

.navbar {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
}

This is what developers mean when they say that Grid is used for creating the whole page outline while Flexbox is used for the details.

When you have a loosely defined layout that adapts to the size of your content, it’s recommended to use Flexbox. But when you have a fixed page layout, then it’s better to use the Grid model.

Conclusion

The Flexbox layout allows you to create a one-dimensional layout where you can easily expand or shrink your element sizes depending on the available space, but it’s hard to define a strictly three-column layout using the same model.

The Grid layout allows you to control the placement of your items in a two-dimensional layout, but it’s hard to expand two columns to fill the space of a three-column layout as previously explained.

Both Flexbox and Grid layout models are built-in CSS layout models that you can use to develop responsive layouts for your web application. The models are created for different purposes, and some things are easier to do with one model over the other.

You are free to use one of them, both, or neither depending on the requirement of your web project.

Source: bitsrc.ioAuthor: Nathan Sebhastian

Leave a Reply

Your email address will not be published.

Scroll to top