Learning CSS Grid For the First Time
Tags: css, design, codepen, codenewbie
Published: 2020-08-20 08:31:32

Hey Everyone, my first time writing a post and thought **CSS Grid** is the best topic to share with you as this is what I am learning today.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5t73cl3j81hkv4selflb.png)

I am not going to explain what it is and what it does, we will simply start with coding it out. First of all, this is the HTML of our CSS Grid.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/js1beall09d3ycke90l3.png)

Before starting anything with the classes, I am adding flex properties to the body to center align all the items.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7np9xthrsubl806l91u2.png)

Let's start with the .container - 
1. `width: 960px;` - Setting a width of 960px to the whole container
2. `display: grid;` - This is the first step of creating our CSS grid. We will set display to grid in the container class.
3. `grid-template-columns: 1fr 1fr;` - Now we are adding two columns to the grid. 1fr means 1 fraction which means 100% of the width, here we have 1fr x 2 which means each column gets 50% of the width of the container.
4. `grid-template-rows: 1fr 1fr 1fr 1fr;` - Similarly, we are now adding 4 rows to the grid with 1fr.
5. `grid-gap: 1rem;` - Once we have defined our grid, let's add some gap to it. we can use grid-gap to add gutter space around rows and columns.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/phd8s9nyigwk42sv7i5x.png)

**Now, we will add some CSS for each .item in the grid.**
1. `padding: 50px;` - Added padding of 50px to each of the item.
2. `border-radius: 5px;` - Added Border Radius of 5px.
3. `border: 5px solid #171717;` - Added 5px solid border around items.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qpfn445s8mo3swp5ftfy.png)

**Our CSS Grid should look like this till now.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tssiwxwcnspjswia5h0w.png)

**Now, we will start make our header and footer to get all the column size.**

1. `.header { grid-column: 1/4; }` - We are specifying that our grid item header needs all the column space in the container.

2. `.footer { grid-column: 1/4; }` - We are specifying that our grid item footer needs all the column space in the container.

**It will result into this:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bzlnswenzl12iy8ff8cb.png)

**Alright, we got out header and footer look good. Time to give space to sidebar and main box.**

1. `.sidebar { grid-row: 2/5; grid-column: 1/2; }` - Here we are doing two things. First, setting row to take space from 2nd row to 5th and the second is to take columns space from 1st to 2nd.

2. `.main {grid-row: 2/5; grid-column: 2/4; }` - Here we are asking our grid to set our row space from row 2nd to 5th and column space from 2nd to 4th.

**Adding this to the CSS, our Grid will look like this:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b7gx2uml8r0321linb30.png)

Now, we are left with our Box1 and Box2. We will give them 50% column space to each using **grid-column**.

1. `.box1 { grid-column: 1/2; }`
2. `.box2 { grid-column: 2/4; }`

**We are complete with our First CSS Grid.**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wk8wxn7ja40c5xm012cj.png)

To make it look good, we can add some gradient background and drop shadow to the item class and tada! This looks stunning.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5t73cl3j81hkv4selflb.png)

**Thanks for reading out till the end, It was my first ever post on dev.to - Full Codepen: https://codepen.io/avithour/pen/jOqMdmG**