Master CSS Grid by Building 5 Layouts in 17 Minutes

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:

• Tasks-Design
• CSS-Grid-Starter

Full Tutorial:

_________ SPOILER ALERT ________

1: Pancake Stack

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;}

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

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;}

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;}

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;}

or

.task-2 .item-1 {  grid-column: 2 / span 4;}

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

.task-2 .item-2 {  grid-column: 6 / span 6;}

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

Youtube Link

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

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 use 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;}

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;  }}

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;  }}

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;}

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";}

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;  }}

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;  }}

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

We can achieve it by doing:

.task-4.container {  display: grid;  gap: 24px;  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}

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);}

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:

Master Flexbox in 12 Minutes with Most Common Use Cases

Thu Nghiem Nov 11 3 min read

#tutorial #webdev #html #css

Build Registration Page with HTML and CSS in 30 minutes

Thu Nghiem Oct 17 1 min read

#tutorial #webdev #javascript

Build a Responsive Website Using HTML and CSS in 30 minutes

Thu Nghiem Oct 12 1 min read

#tutorial #webdev #beginners

__________ About me __________

• I am the founder of DevChallenges
• Subscribe my Youtube Channel
• Follow my Twitter
• Join Discord