Brief introduction to CSS-Grid

What is that “story” about?

This story is about CSS-Grid which is a relative new CSS-Feature which allows you to create a Grid-Layout.
CSS-Grid works responsive which means that you can just create some grid blocks, put some content in them and the blocks are going to resize as the contents size, if you do it correctly.

We will build a very basic and simple Grid-Layout.

In the comparison to flexbox, CSS-Grid allows you to create a two-dimensional Grid-Layout while flexbox allows you to create only an one-dimensional Grid-Layout.

Picture from: http://maddesigns.de/css-grid-layout-2764.html

Today, we are going to build that simple Grid-Layout step by step:

In CSS-Grid you will work with columns and rows.
The columns are going to be created by our selfs but the rows are generated automatically as you create elements in your HTML.

First of all, go to your HTML-Body Tag and create a div with a class.
You can name that class however you want but I am going to name that class “wrapper” for clarity purpose.

This div is going to be our Grid-Layout.
Now, inside our wrapper, create 4 div-elements with some text in them and look at your page how it looks like.
Give each div element of these additional 4 div-elements a class.

That should then look like this:

<div class="grid">
      <div class="box1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, numquam?
      </div>
      <div class="box2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae.
      </div>
      <div class="box3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae.
      </div>
      <div class="box4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae.
      </div>
</div>

Now, we are ready to setup the Grid-Layout.

Go to your HTML-Head Tag and add the <style> Tag.
Access your wrapper and add the property,
display: grid;

That should look like this:

<style>
      .wrapper {
        display: grid;
      }
</style>

Now, if you look at your page again, you won’t see any changes but with that you will later on be able to see your Grid-Layout otherwise not.

Now, we are able to define how many columns we want in a row.

grid-template-column: 1fr;

With that we create one column which is big as 1 fraction-unit(fr).

In our case we want to have 3 columns so we do that:

grid-template-column: 1fr 1fr 1fr; 

We could also do:

grid-template-column: 1fr 2fr 2fr;

This would create 3 columns where the second and third column are 2 fraction-units big while the first one is only 1 fraction-unit(fr) big.

If you want some spacing between rows and columns you can do this.

grid-gap-column: 1em;
grid-gap-row: 1em;

Or you can do it in just one command:

grid-gap: 1em;

Of course you could also use pixels or percentages rather than em.

Now, look at your page.

To make the difference more clear, we are going to implement some CSS.
Like that:

.wrapper > div {
        background: #eee;
        padding: 1em;
      }
.wrapper > div:nth-child(odd) {
        background: #ddd;
      }

This snippet means:
Browser, please give all div elements inside the class “wrapper” a background colour of “#eee” and a padding of “1em”.
And give every child of wrapper which has a odd number as index like is the first div or the third div, the colour of “#ddd”.

Now, look at your page.

As you probably noticed, your div elements are aligned in 3 columns, but one of them is not.
That is because every div-element becomes a column, when we use “grid-template-column”.
Since, “grid-template-column” also means create 3 columns in 1 row, our forth div element has to be moved to the second row.

If we would create 4 columns in 1 row then of course the fourth div would also be aligned on the same row as our other 3 columns.

Just try it out!

In CSS-Grid we are also able to let one column take two columns or more at one time.
If we would apply that to our first box, this would make the first box as big as 2 columns

For example:
Box1 is our first column and 1 fr big.
Now we are going to say okay: “Box1 is now going to be 2 columns at the same time”

.box1 {
 grid-column: 1/3;
}

The command: “grid-column: 1/3;”
works only with that picture above.
It basically tells box1 be as big as from number 1 to number 3.
In other words be as big as column 1 and column 2 together.
Or again in other words be as big as from the beginning of column 1 to the end of column 2/the beginning of column 3.

Now, look at your page.

We can also do the exact same thing vertically, in other words for rows.

.box1 {
grid-column: 1/3;
grid-row: 1/3;
}

It works exactly the same but just in addition, also vertically.
Look at your page and you know what I mean.

As you also probably noticed, the Grid is pretty responsive, the columns and rows adapt to what ever changes you do.

Now, in our case we also want to make box 2 a 2 rows big so we do and give it a fixed column position

.box2 {
 grid-column: 3; // This will make box2 the third column
 grid-row: 1/3; // This will make box2 being row 1 and 2 at the same time
}

Notice: We have now 3 rows since box 2 and 1 are 2 rows big.
Notice: If a column in a row is 100px big, then the other columns in the same row, will adapt to that, if you don’t explicitly say a column to have another size.

Now, we are almost done.
As you can see our box1 is not as big as we wanted it to be, this is because or box1 doesn’t need a bigger size.
So, we will need a minimum height for it.
We can do that this way, inside our wrapper:

.wrapper {
 display: grid;
 grid-template-column: 1fr 1fr 1fr;
 grid-gap: 1em;
 grid-auto-rows: minmax(100px, auto);
}

The last line:

grid-auto-rows: minmax(100px, auto);

means: “Please, give the row a minimum height of 100px and if necessary have a auto height(be bigger if necessary).

Look at your page, we are almost done.

One thing is left, box3.
As you can see on the first picture, box4 is column 1 in the third row, while box3 is the third column in the second row.

This is the snippet behind that fact:

.box3 {
 
 grid-column: 2/4;
 grid-row: 3;
}

This means: “Box3, please be column 2 to end of column 3/beginning of column 4/Line 4.
That way box4 gets moved to be the first column, since we have only 3 columns not 4.

Finished! Now we have our Grid-Layout.

Summary:

CSS-Grid is a CSS-Feature that allows you to easily create responsive design.
You have columns and rows, while rows are being created automatically.

display: grid; // activates grid
grid-template-column: 1fr 1fr 1fr; // Creates 3 columns with 1 fr size, each
grid-gap: 1em; // Spacing between rows and columns
grid-auto-rows: minmax(100px, auto); // sets minimum height, auto 
height if necessary

This activates the grid and creates 3 columns, with minimum height of 100px, where each has a size of 1 fr(fraction-unit) while there is a spacing between rows and columns.

Apart from that, you can give move divs to other positions with

grid-column: 3; // divs position = 3 now
grid-row: 3; // row position = 3 now

You can also make divs as big as 2 columns or more with

grid-column: 1/3; // Div is as big as column 1 and 2(horizontally)
grid-row: 1/3; // Div is as big as row 1 and 2(vertically) 

Disclaimer:
I am just starting with blogposts and with Web-Development.
I am doing this blogposts only for educational reasons, since teaching others is the best way to teach yourself and getting feedback from audience while doing that is more than awesome.
So, if there is anything good, wrong, could be better, missing or what ever.
I highly appreciate any kind of feedback, towards the content and how I should blog.

Thank you for reading, I hope it helped you.

If you have any kind of questions towards this topic, just ask me.
I will try to answer your questions and since I am new to Web-Development I will probably also research for you to answer your questions.
This is also going to help me to learn more :)

Best Regards
Hassan