Learn CSS Grid and Flexbox fundamentals! [A full guide]

Shuvo Habib
7 min readNov 6, 2018

FYI, CSS Grid and Flexbox are the future of Web layouts!

What is the CSS Grid Layout?

CSS Grid layouts are fundamental to the design of websites, and the module is the most powerful and easiest tool for creating it. Thus, Grid Layout gives us a method of creating grid structures that is described in CSS.

Amazing browser support of CSS Grid (src: caniuse.com)

What about, Flex?

The Flex Box module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown/dynamic.

Amazing browser support of CSS Flex (src: caniuse.com)

Note:

The main difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension either a row or a column, on the other hand, Grid was designed for two-dimensional layout rows, and columns at the same time.

Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Enough theory, let's jump to Grid layout first

Consider a markup of Six items under a parent element.

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>

To make a grid layout, we need to give the parent div a display of grid. As simple as that.

.parent {
display: grid;
}

We just dived in the grid layout. Though it does not do anything currently, but deep inside it’s assigned with superpowers. (I added a bit CSS styling, ie: padding, background-color etc.)

--

--

Shuvo Habib

I'm a storyteller about UX, Frontend dev technologies, and A/B testing