loading...
Cover image for Master CSS Grid by Building 5 Layouts in 17 Minutes

Master CSS Grid by Building 5 Layouts in 17 Minutes

nghiemthu profile image Thu Nghiem ・5 min read

I have bad news and good news, the bad news is that CSS Grid is complicated and there are many things to learn. But the good news is we don't need to know everything.

In this tutorial, we will build 5 layouts (which are 5 tasks) with CSS Grid, and at the end of the tutorial, you will be ready to use CSS Grid in your next projects.

If you want to code along, be sure to download the resources:

Full Tutorial:

_________ 👾 SPOILER ALERT ________

1: Pancake Stack

Alt Text

For task number one, we need to create a pancake stack layout. To have this, we can create 3 rows by using grid-template-rows: auto 1fr auto. The second row with a value of 1fr will expand as much as it can, whereas the other two only have enough space wrapping its content.

So to achieve the layout, all we have to do is to give the container:

.task-1.container {
  display: grid;
  height: 100vh;

  grid-template-rows: auto 1fr auto;
}
Enter fullscreen mode Exit fullscreen mode

and you can see this layout everywhere, for example, one of my tutorials a few weeks ago:

Alt Text

Youtube link

2: Simple 12 Columns Grid Layout

12 Columns Grid has been forever, and with CSS Grid, it makes it, even more, easier to use. In this simple task we need to give the item-1 4 columns and items-2 6 columns.

First, we need to create 12 columns, we can do that by grid-template-columns: repeat(12, 1fr);:

.task-2.container {
  display: grid;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  column-gap: 12px;

  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Notice here, we are also having the 12px gap between every column, and similar to Flex, we also can use align-items and justify-content.

The next thing we need to do is to tell which column the items should take.

For item 1, we want it to start from column 2 and end at number 6. So we have:

.task-2 .item-1 {
  grid-column-start: 2;
  grid-column-end: 6;
}
Enter fullscreen mode Exit fullscreen mode

Notice that the item will not take column number 6, only 2, 3, 4, and 5.

We can also have the same affect by writing:

.task-2 .item-1 {
  grid-column-start: 2;
  grid-column-end: span 4;
}
Enter fullscreen mode Exit fullscreen mode

or

.task-2 .item-1 {
  grid-column: 2 / span 4;
}
Enter fullscreen mode Exit fullscreen mode

With the same logic, we will have for the item 2:

.task-2 .item-2 {
  grid-column: 6 / span 6;
}
Enter fullscreen mode Exit fullscreen mode

12 columns layout are in everywhere, there is also one tutorial that I use this technique

Alt Text

Youtube Link

3: Responsive Layout without and with grid-template-areas

I am going to show you 2 options. For the first option, we are going to use 12 columns grid that we learned from the 2nd task.

The second option, we going to using a property called grid-template-areas.

Alt Text

3.1 Using 12 Columns Grid

Mobile

This is straight-for-ward, we use what we learned from task number one, and make the main section expand. We also give the grid a gap: 24px as in desktop, there will be columns, not just rows:

.task-3-1.container {
  display: grid;
  height: 100vh;

  grid-template-rows: auto auto 1fr auto auto auto;
  gap: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Tablet

On a tablet, which screen is wider than 720px we want to have 12 columns and 4 rows and the third row would expand as much as it can:

@media (min-width: 720px) {
  .task-3-1.container {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }
}
Enter fullscreen mode Exit fullscreen mode

Now that we have 12 columns, we need to tell how many columns should items take:

@media (min-width: 720px) {
 .task-3-1 .header {
    grid-column: 1 / span 12;
  }

  .task-3-1 .navigation {
    grid-column: 1 / span 12;
  }

  .task-3-1 .main {
    grid-column: 3 / span 10;
  }

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

  .task-3-1 .ads {
    grid-column: 1 / span 2;
  }

  .task-3-1 .footer {
    grid-column: 3 / span 10;
  }
}
Enter fullscreen mode Exit fullscreen mode

Notice here that we need to give .task-3-1 .sidebar: grid-row: 3; because sidebar is after the main section in the DOM.

Desktop

I leave it for you or you can watch the video to find out.

Real life example

You can actually find a similar layout on dev.to homepage

3.1 Using grid-template-areas

To use grid-template-areas, we need to define the area of the item:

.task-3-2 .header {
  grid-area: header;
}

.task-3-2 .navigation {
  grid-area: nav;
}

.task-3-2 .ads {
  grid-area: ads;
}

.task-3-2 .sidebar {
  grid-area: sidebar;
}

.task-3-2 .main {
  grid-area: main;
}

.task-3-2 .footer {
  grid-area: footer;
}
Enter fullscreen mode Exit fullscreen mode

After item areas are defined, all we have to do it to give the container the position by using grid-template-areas

Mobile

.task-3-2.container {
  display: grid;
  height: 100vh;

  gap: 24px;

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

  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "ads"
    "footer";
}
Enter fullscreen mode Exit fullscreen mode

So on mobile, we create 1 column and 6 rows. And row number 3, which is main, should expand as much as I can.

This makes it so easy if later on, you want to change the order/position of the item.

Tablet

@media (min-width: 720px) {
  .task-3-2.container {
    grid-template-areas:
      "header header header"
      "nav nav nav "
      "sidebar main main"
      "ads footer footer";

    grid-template-rows: auto auto 1fr auto;
  }
}
Enter fullscreen mode Exit fullscreen mode

If the screen is wider than 720px, we want to create 3 columns and 4 rows. The header and the navigation, both tasks 3 columns.

On the third and fourth row, the sidebar and ads take 1 column, whereas, the main and footer take 2 columns.

Desktop

@media (min-width: 1020px) {
  .task-3-2.container {
    grid-template-areas:
      "header header header header"
      "sidebar nav nav ads"
      "sidebar main main ads"
      "footer footer footer footer";

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

Enter fullscreen mode Exit fullscreen mode

Similar logic to tablet view, for the desktop, we create 4 columns and 4 rows,

Conclusion

Both options have Pros and Cons, but choose the one that easier for you and makes sense in the scenario.

4: Responsive Layout Without Media Query

Alt Text

We can achieve it by doing:

.task-4.container {
  display: grid;
  gap: 24px;

  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
Enter fullscreen mode Exit fullscreen mode

What we just did was creating a flexible column layout that the column should never be less than 150px and share the space evenly.

5: 12 x 12 Chess Grid

For the last task, I want to show that. Not only we can define the number of columns but we can also define the number of rows:

.task-5.container {
  display: grid;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
Enter fullscreen mode Exit fullscreen mode

This is useful when we have to put items in a specific place in the layout.


This concludes the tutorial, checkout the video for a full tutorial

Related tutorials:

__________ 🐣 About me __________

Discussion

pic
Editor guide
Collapse
darkwiiplayer profile image
DarkWiiPlayer

The first example should normally be done with flex instead, but I guess it's perfectly fine as an example. Just don't actually do that on a real website.

Also, .task-2 .item-1 you probably meant to write .task-2 :first-child() ;)

Collapse
nghiemthu profile image
Thu Nghiem Author
  • Except for some browser support, please tell me a reason why not using grid in a real website?
  • No I meant what I meant 😉
Collapse
darkwiiplayer profile image
DarkWiiPlayer
  • What browser supports grid but not flex?
  • That was just my way of saying that I think CSS should prefer describing to naming, aka. using a selector like :first-child instead of using a class that has to be present both in CSS and HTML.
Thread Thread
nghiemthu profile image
Thu Nghiem Author
Collapse
stephaniewalter profile image
Stéphanie Walter 🦊🌈

This is nice, I love grid layout so much, it makes is easy to do layouts in a minimum amount of code.
It reminds me a lot of Una's demos here so for even more quick grid layouts I highly recommend this web.dev/one-line-layouts/

Collapse
nghiemthu profile image
Thu Nghiem Author

Thank you, I watched to the the idea for the tutorials as well

Collapse
rockykev profile image
Rocky Kev

I love it! My team were talking about Surface Duo, and our concerns that our hundreds of sites will not at all hold up (Most don't even use flex!). I've been thinking of mastering CSS grid to make it work.
Appreciate this!

Collapse
nghiemthu profile image
Thu Nghiem Author

Thanks, glad it helps :)

Collapse
eltonfms profile image
Elton Silveira

100vh height in browsers mobile is a big trap.

Collapse
ldrmuse profile image
Melissa Heying

This is great! Just what I needed. Thanks for sharing!

Collapse
cheeberger profile image
Caleb

Thank you :)

Collapse
hrossouw42 profile image
Harmun

A really good exercise to wrap your head around basic CSS layouts. Good job!

Collapse
nghiemthu profile image
Thu Nghiem Author

Thank you :)