Learn CSS Grid and Flexbox fundamentals before 2019 hits the ground

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 are 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;
}

Congratulations, you 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.)

As I said Grid was designed for two-dimensional layout rows, and columns at the same time. Let’s create two columns and three rows. We’ll use the grid-template-row and grid-template-column properties.

.parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
text-align:center;
}

From the code and the picture, I think you understand how dead simple the concept is. grid-template-row property has three values and grid-template-column property has two values. So, the number of values of the properties defines the number of columns or rows respectively. So, you can start playing with Grid just by changing the number of values of grid-template-row and grid-template-column .

Did you understand the relation between the values and how the grid looks? I guess you’re a bit confused. I’d like to make sure you don’t have any confusions, so I’m adding another example.

.parent {
display: grid;
grid-template-columns: 100px 320px;
grid-template-rows: 80px 50px 120px;
}

Let me break the code again for you, grid-template-columns: 100px 320px;

The width of the Items of the First Column is 100px width and for the Second Column, it is 320px;

And for this, grid-template-rows: 80px 50px 120px;

The height of the Items of the First Row, Second Row and Third Row is 80px, 50px and 120px respectively.

Grid Line

To understand the positioning concept of Grid layout first, we need to understand Grid Line and how it’s counted. It was very tricky for me when I learnt CSS Grid. The grey lines are the grid lines.

To position and resize the items we’ll target them and use the grid-columnand grid-row properties:

If we want the first child to be expanded from Grid line 1 to Grid line 4, we need to specify that to the child1 class. grid-column-start: 1 is the starting point for the 1st child and grid-column-end: 4 is the ending point of the first child.

.parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px 50px;
}
.child1{
grid-column-start: 1;
grid-column-end: 4;
}

At this point in your learning, I’m 100% sure you’ll understand the code below.

.child1{
grid-column-start: 1;
grid-column-end: 4;
}
.child3 {
grid-row-start: 2;
grid-row-end: 4;
}
.child4 {
grid-column-start: 2;
grid-column-end: 4;
}

Here you go…

These are the basics, you needed to jumpstart CSS Grid. And if you want to dive a bit more you can learn from CSS Tricks and Mozilla Developer Network.

CSS Grid Code for this tutorial: https://codepen.io/ShuvoHabib/pen/EOVmKY?editors=1100

You have learnt enough about CSS Grid. What about leaning flexbox now? Take a deep breath, grab a cup of coffee. Ready set go.

Time for Learning Flex Box

Like before, we’ll only focus on core principles, while leaving out stuff you shouldn’t care about until you’ve understood the basics. Let’s start with the same piece of code.

<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>

Setting the parent's display to flex

.parent {
display: flex;
}

This gives us Six child items positioned inline.

The two axes of flexbox

Main axis: The main axis is defined by flex-direction, which has four possible values:

  • row
  • row-reverse
  • column
  • column-reverse

Cross axis: The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.

By default, the flex-direction is set torow , showing all the child items in a row, starting from the left. If the flex-direction is row-reverse if the direction of the child items will be starting from the right and ending to left.

.parent {
display: flex;
flex-direction:row-reverse;
}

We can swap the two axes by adding flex-direction: column And flex-direction: column-reverse will revert the column.

.parent {
display: flex;
flex-direction: column;
}

2. Justify content and Align items

We can make this list horizontal again, by switching the flex-direction from column to row, as this flips the flex layout’s axes back again.

The reason the axes are important to understanding is that the attributes justify-content and align-items control how the items are positioned along the main axis and cross axis respectively.

Let’s center all the items along the main axis by using justify-content:

.parent {
display: flex;
flex-direction: row;
justify-content: center;
}

And let’s adjust them along the cross axis, using align-items.

.parent {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

These are the other values of justify-content and align-items The names are self-explanatory, you need to play around those for better understanding by using any of these at a time.

justify-content:

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
.parent { 
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items:

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch (default)
.parent { 
align-items: flex-start | flex-end | center |baseline|stretch;
}

Properties for the Children

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.child {
order: <number>; /* default is 0 */
}

align-self” allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

It has the same values of align-items.

.child { 
align-self: auto|flex-start|flex-end|center|baseline|stretch;
}

Point to be noted that float, clear and vertical-align have no effect on a flex item.

Enough reading! You can just play games and learn flexbox and grid.

Grid Game:

Flex Box Game:

I hope you found this tutorial fun and valuable. That’s it and if you found this article helpful, you can also follow me on Medium and Twitter, and if you have any doubt, feel free to comment! I’d be happy to help :)