CSS Grid vs Flex Box

In this article we will discuss about CSS Grid and Flex Box. Let’s first describe that what these actually are.

CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

For Example a grid container of nine grid items:

Code:

Output:

Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

For Example a flex container with three flex items:

Code

Output

Now let’s talk about the main difference between CSS grid and Flexbox.

CSS Grid vs Flexbox:

The most important thing to know is that flexbox is one-dimensional, while CSS Grid is two-dimensional. Flexbox lays out items along either the horizontal or the vertical axis, so you have to decide whether you want a row-based or a column-based layout. A flex layout can also wrap in multiple rows or columns and flexbox treats each row or column as a separate entity, based on its content and the available space.

The flexbox cross axis is always perpendicular to the main axis.

On contrary, CSS Grid lets you work along two axes: horizontally and vertically. Grid allows you to create two-dimensional layouts where you can precisely place grid items into cells defined by rows and columns.

Some Facts about CSS flexbox and grid:

CSS Grid focuses on content placement. Each item is a grid cell, lined up along both a horizontal and a vertical axis.

∙ Flexbox focuses on content flow rather than content placement. Widths (or heights) of flex items are determined by the content of the item. Flex items grow and shrink according to their inner content and the available space.

∙ Flexbox has fairly good browser support, while CSS Grid is not supported by IE11- and Edge 15-.

The flexbox vs. CSS Grid question doesn’t have a clear-cut answer and depends on many different factors. Don’t stick to one or the other, but always think through which serves your goals better.

What are your thoughts on CSS Grid and Flexbox? Let us know in the comments.

Written by: Iman Ali

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store