Learning CSS Grid For the First Time

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 -

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.

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.

Our CSS Grid should look like this till now.

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:

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:

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.

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

Comments

[Mizux]

My second version using 2fr for sidebar/main (i.e. having 4 rows of different size)

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns */
  grid-template-rows: 1fr 2fr 1fr 1fr; /* four rows*/
}


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

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

.main {
  grid-column: 2/3;
  grid-row: 2/3;

}

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

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

.footer {
  grid-column: 1/3;
  grid-row: 4/5;
}

[Mizux]

Are you sure about your explanation ?
disclaimer: I'm a totally noob on web dev, so I may be wrong, first time a play with css grid (and flex) ^^;

1) For me your layout has 4 rows with second row taking 2fr

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

OR 5 rows and sidebar/main take two rows (i.e. the second and third row)

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

note: I'll take the second approach in the rest of my answer
note: Didn't test with the first proposal...

2) You should use repeat()
see: developer.mozilla.org/en-US/docs/W...

grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);

3) If i understand well the doc, you are using a line-based placement. So if you have two fragments i.e. two columns, you'll have three vertical lines.

|  |  |

So your grid column index will go from 1 to 3 (yes no 4)
e.g. you header will go from the first line (1) up to the last line (3), so you should write:

.header {
  grid-column: 1/3;

1 being the start line and 3 the end line.

And for row since I split in 5 rows, then I'll have 6 horizontal lines...
e.g. your sidebar take two rows from line 2 to line 4 so you'll write

.sidebar {
  grid-row: 2/4;

So IMHO the correct layout is:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns */
  grid-template-rows: repeat(5, 1fr); /* five rows */
}

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

.sidebar {
  grid-column: 1/2;
  grid-row: 2/4;
}

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

.box1 {
  grid-column: 1/2;
  grid-row: 4/5;
}

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

.footer {
  grid-column: 1/3;
  grid-row: 5/6;
}

ref: developer.mozilla.org/en-US/docs/W...