Back to Basic: Flexbox or Grid?

Introduction

Back to Basic will answer some of my questions when I first started learning CSS. Personally, I think when you start learning CSS, it will be very hard, because CSS has about 520 properties that we can use. Of course, we won't use it all, there are many properties that I still didn't know, but there are plenty of properties that we need to understand to be proficient in CSS. This blog will not cover CSS from the really basic ones, but I will try to show you the implementation.

If you never have used flexbox or grid before, you can check this flexbox guide and grid guide from css-tricks.

Question

When should we use flex or grid?

When I first started learning CSS and know about flexbox and grid, I got confused about when to use flexbox and grid. In this blog, I will try to explain my approach on how to choose between flexbox and grid according to the condition.

Use Case of Using Flex

I always use flex to give a layout that only has 1 dimension (horizontal only or vertical). In this blog, I will give you some example of flexbox use case with some of my project that I have made.

1. Container that has all elements in the center both horizontally and vertically

We usually see this in a landing page

Example:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

This is the most common use case of flexbox. We can center everything both horizontally and vertically with just 3 lines of CSS.

2. Divide page into parts

When we want to split a page into sections, flexbox is perfect for this. For example, we can create a sidebar and main content area:

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
}

3. Creating Navbar (using space-between)

Navbar is one of the most common components in web development. Flexbox makes it incredibly easy:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Use Case of Using Grid

Grid is powerful when you need to create two-dimensional layouts. Here are the scenarios where I prefer grid over flexbox:

1. Making 2 dimensional layout

Grid shines when you need both rows and columns:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 2rem;
}

This is perfect for card layouts, image galleries, or any content that needs to be arranged in a grid pattern.

2. Make layout with different sizes

One of the most powerful features of grid is the ability to create complex layouts with varying sizes:

.complex-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 200px auto 100px;
  gap: 1rem;
}

You can even make elements span multiple columns or rows:

.featured-item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Summary

Here's my rule of thumb:

• Use Flexbox when:

  • You need a one-dimensional layout (row or column)
  • You want items to wrap naturally
  • You're aligning items along a single axis
  • You're creating navigation bars, button groups, or simple alignments

• Use Grid when:

  • You need a two-dimensional layout (rows and columns)
  • You want precise control over item placement
  • You're creating page layouts or complex component layouts
  • You need items to span multiple rows or columns

Remember, you can also combine both! Use grid for the overall page layout and flexbox for components within grid items.

Conclusion

Both flexbox and grid are powerful tools in modern CSS. Understanding when to use each will make your styling more efficient and maintainable. Don't be afraid to experiment and see what works best for your specific use case!