Flexbox vs. grid in CSS

CSS offers flexbox and grid as powerful options for styling content and creating seamless layouts. Although they are used for different purposes, they may even go hand in hand in aligning items and controlling the flow of the layout. As the name suggests, a grid is a two-dimensional layout feature with rows and columns. On the other hand, a flexbox is not only one-dimensional but also a layout feature for aligning items and spaces. So when should we use a flexbox, and when should we use a grid?

Flexbox vs. grid

To choose between the two, consider the following checklist to guide the decision. To reach the end, we need to critically answer four questions summarized in the checklist to the right: whether we are content-focused or layout-focused, whether it is a simple design or complex layout design, whether the layout under construction is one-dimensional or two-dimensional, and lastly, are we dealing with overlapping and symmetrical designs? We’ll discuss each in the coming sections.

Flexbox vs. grid checkbox
Flexbox vs. grid checkbox

Content-focused or layout-focused

If we know how our content will be, specifically its behavior, we’ll go for CSS flexbox to arrange our items. Determining the behavior of our items means knowing their sizes, whether the sizes grow, shrink, or remain fixed. When the item behavior is predictable, it’s easier to control how it will be styled, and the final layout will just flow naturally. Simply put, a container would stretch under the influence of flexbox as the content grows. However, we would opt for the CSS grid if we were more focused on the item arrangement, regardless of their behavior and how they would fill the space. The content inside a grid will only fill the allotted space and not go beyond. In short, if we have the clearest idea of how the result of our layout would look like, go for CSS grid; if not, opt for flexbox only if we are sure of how each item to be placed will behave.

Simple design or complex design

We opt for grid over flexbox for several reasons while creating complex layouts.

  • CSS grid caters to two dimensions simultaneously, while flexbox can handle a single dimension. Hence, we can place items both horizontally and vertically far more easily with grid than with flexbox.

  • Grid can create layouts that overlap and are asymmetrical, but flexbox lacks this ability.

  • Grid allows for both implicit and explicit placement of items.

1D layout or 2D layout

As discussed in the previous section, a CSS grid can handle two dimensions. That is how we add rows and columns in a layout. However, the flexbox can either deal with rows or columns, not both simultaneously.

Overlapping or asymmetrical layouts

Overlapping and asymmetric layouts are unlike our typical grids, where each row and column has the same width and height, and the grid layout appears organized. These layouts are like broken grids, where items are placed haphazardly. With a flexbox, we can’t create such layouts. However, they can be designed with a CSS grid.

Time to choose

The following is a working proof of how items are positioned using grid and flexbox. The noteworthy things here are how grid-template-columns allow us to specify the size of each column in the grid and how we can also set the spanned columns and rows for each grid item with grid-row and grid-column, respectively. Lastly, note the markup for creating a flexbox and the generated output. The box size increases as we go from box 9 to box 10—this is because the width of the content changed, so the flex item had to expand to fit that content. Lastly, all flex items have been aligned at the center of the vertical axis. Tweak the code below:

Explanation

In the index.html file:

  • Lines 1–8: This code section contains boilerplate HTML and, in our case, is most useful for linking stylesheets.

  • Lines 10–24: Next, we create the HTML template for a grid. It contains a parent div styled with the class educative_grid. Inside the parent container are twelve child div elements.

  • Lines 25–39: Lastly, we will create the template for the flexbox. Its parent container will be styled with the educative_flexbox class and contain twelve child div elements, just like the grid.

Classes in the styles.css file:

  • grid_heading: This class ensures that the grid and flexbox headings are centerally-aligned.

  • educative_grid: The display: grid property makes the container on which this class is applied behave as a grid. The grid-template-columns:auto auto auto auto; command makes the columns of the grid automatically adjust their size; this ensures that space is evenly distributed between the columns. The gap between the grid items is kept as 10px.

  • educative_grid_item: This class adds basic styling to each grid element. It ensures that the background color of each grid item is pink and there is a solid border of 1px around each one. Plus, it ensures that a padding of 30px is applied between the contents of the child element and its border and that the text is bold and centerally-aligned.

  • educative_flexbox: This class ensures that the HTML element upon which the class is applied behaves like a flexbox. It center aligns the flexbox’s child elements along the horizontal axis with the align-items:center property. By setting the flex-direction to column, we ensure that the next flexbox item is created right below the current one, creating a vertical column. Another option would have been to set this property’s value as row, ensuring that the next item is placed right next to the current one, creating a horizontal row.

  • educative_flexbox_item: This class sets the same properties for the flexbox items as for the grid items. However, there are two differences. Firstly, it ensures that an orange background color is applied and, secondly, that the padding between the internal content and the border of each item is 35px.

Conclusion

How many from each column were you able to tick? Choose the one with the greater ticks because it is better suited for our UI design. In a nutshell, we utilize CSS grid when we are going for more complex, overlapping, or asymmetrical layouts, while we choose flexbox when we want to align items within a simpler layout. It’s always best to utilize the powers of both flexbox and grid for greater flexibility.

Note: Please look at the links below for further reading.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved