Learning CSS Grid For the First Time

Avi Thour — Thu, 20 Aug 2020 08:31:32 +0000

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.

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.

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

Let's start with the .container -

width: 960px; - Setting a width of 960px to the whole container
display: grid; - This is the first step of creating our CSS grid. We will set display to grid in the container class.
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.
grid-template-rows: 1fr 1fr 1fr 1fr; - Similarly, we are now adding 4 rows to the grid with 1fr.
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.

Now, we will add some CSS for each .item in the grid.

Our CSS Grid should look like this till now.

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

.header { grid-column: 1/4; } - We are specifying that our grid item header needs all the column space in the container.
.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:

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

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

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

We are complete with our First CSS Grid.

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

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

Forem: Avi Thour