# Master CSS Grid.

Hey Fellow Developers, today I'll be explaining how CSS-Grid works. So let's dig in. 

First things first, What is a 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.

![grrid.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646379279926/rVFH1TrqK.gif)

Let's see how they work with a simple Example.


```
.grid-container {
  display: grid;
  padding: 10px;
  background-color: pink;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}

``` 
In the above code, Display is **Grid** for working with its properties. Then if look at line number 4, it says

>grid-template-columns: 100px 100px 100px;

This tells browser to make **3 Columns** of **100px ** each.

Same with line number 5, it says

>grid-template-rows: 100px 100px;

This tells browser to make **2 Rows** of **100px ** each.

Let's take a look at the HTML code.


```
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>
``` 
Look at the code, it has a main **div** with a class called **"grid-container"** and within that container, it has **6 divs** with a class called **"grid-item"**. Now, what CSS grid will do? It will place these 6 divs in such a way that they fulfill these statements.

>grid-template-columns: 100px 100px 100px;

>grid-template-rows: 100px 100px;

It will make 2 Rows of 100px each and 3 Columns of 100px each.
Look at the output below.




%[https://codepen.io/jesse06/pen/PoOVKXB]

If we change
>grid-template-columns: 100px 100px 100px;

to 

>grid-template-columns: 100px 100px;

and 

>grid-template-rows: 100px 100px;

to 

>grid-template-rows: 100px 100px 100px;

It will work opposite to the above one.

Yes, you guessed it right. **3 Rows and 2 Columns 100px each**.

%[https://codepen.io/jesse06/pen/podGWNj]

Moving on, what if we don't know the size of Rows and Columns and want to make them flexible?

![d.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646387019625/E4u3a62Ov.gif)

Don't worry, CSS Grid got that covered too. You just have to make a few changes to your code.
Instead of giving some sizes like **"100px"** we can use a keyword called **"auto"**, andddd that's it.

>grid-template-columns: auto auto auto;

This **"auto"** keyword will size the columns dynamically according to the **screen width** and cover the whole screen.

Look at the Output below.

%[https://codepen.io/jesse06/pen/vYWbWrN]


![magic.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646387200329/GHxXzoBWy.gif)

Feel free to play around with it.

To give some gaps between Grid, we can use 

>grid-gap: 6px;

This will give the spacing of 6px between every grid item.

%[https://codepen.io/jesse06/pen/vYWbWrN]

We can also align and justify the items.

**Justify Items**

>Aligns content in a grid item along the row axis.

Look at the Code-Pen below for a better understanding.

%[https://codepen.io/jesse06/pen/RwjaXOv]

And the opposite is true for **Align Items**, i.e.

>It aligns content in a grid item along the column axis.

Take a look at this.

%[https://codepen.io/jesse06/pen/KKyMPVa]

Sometimes it behaves weird, like **"align-items: end"** and **"align-items: center"** look similar.

![tired.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646389444034/Wzi8kXhjJ.gif)

Phew!

Just 2 more properties and we are done.

![what.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646389646672/s5rcqJ_l0.gif)

Now after justifying and aligning items, what if we want to align the whole content?

So there are these properties called **"justify-content"** and **"align-content"** those will do the work.

**Justify-Content**

>Justifies all grid content on row axis when total grid size is smaller than a container.

Have a look at this Code-Pen below.

%[https://codepen.io/jesse06/pen/WNXxvNr]

Here also, the opposite is true for **Align-Content**, i.e.

>Justifies all grid content on column axis when total grid size is smaller than a container.

%[https://codepen.io/jesse06/pen/mdqEVpz]

The values for these properties are self-explanatory.

There is much more about CSS Grid out there, make sure you read that too.

Attached below is the Code-Pen Collection about CSS-Grid.

[CSS-Grid](https://codepen.io/collection/pgZxzd)

Ending it here, Thank you for reading, please give it a 👍 if it helped you.