DEV Community

Cover image for Learning CSS Grid For the First Time
Avi Thour
Avi Thour

Posted on

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.

Alt Text

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

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

Alt Text

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

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

Our CSS Grid should look like this till now.

Alt Text

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

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

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

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

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

Top comments (2)

Collapse
 
mizux profile image
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;
}
Collapse
 
mizux profile image
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...