Translation: Bran by Thu Nghiem Read the original

Grid is a tool you can use to help create a layout for your site. This is especially useful if you need to consider the position, level, or size of different elements.

Grids are complex and there’s a lot to learn. But the good news is that you don’t need to know everything at once.

In this tutorial, we will use CSS Grid to build five different layouts (explained as five separate tasks below).

Here are the first two layouts we will build:

1. How to build pancake stack with CSS grid

For task one, we need to create a pancake stack layout. To create this layout, we can create three rows using grid-template-Rows: auto 1fr AUTO. The second line with a value of 1FR is as expansive as possible, while the other two lines only have enough space by wrapping their contents.

So to implement this layout, all we need to do is provide the container with the following parameters:

.task-1.container {
    display: grid;
    height: 100vh;
    
    grid-template-rows: auto 1fr auto;
}
Copy the code

2. How to create a simple 12-column Grid layout using CSS Grid

The basic 12-column grid layout is still used today. With CSS Grid, it’s even easier to use. In this simple task, we need to give item 1 four columns and Item 2 six columns.

First, we need to create 12 columns. We can use 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;
}
Copy the code

Notice that we also have a 12px gap between each column. Like Flex, we can also use align-items and context-content.

The next thing we need to do is tell the project which column to occupy:

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

.task-2 .item-1 {
  grid-column-start: 2;
  grid-column-end: 6;
}
Copy the code

Note that this item does not include column 6, but only columns 2, 3, 4, and 5.

We can have the same effect with the following code:

.task-2 .item-1 {
    grid-column-start: 2;
    grid-column-end: span 4;
}
Copy the code

Or this:

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

Following the same logic, we will describe item 2 as follows:

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

3. How do I create a responsive layout with or without Grid-template-areas

Here, I’ll show you two choices, using or not using grid-template-Areas. For the first option, we will use the 12-column grid we learned from the second task. For the second option, we will use an attribute called grid-template-Areas.

First option: How do I use a 12-column grid

Mobile devices

That’s easy. We can use what we learned from the first task to expand on the main parts. We can also give the grid a blank of 24px, just like on the 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;
}
Copy the code

The tablet

For a tablet with a screen width greater than 720px, we want 12 columns and 4 rows. The third section will be as extensive as possible:

@media (min-width: 720px) {
    .task-3-1.container {
        grid-template-columns: repeat(12.1fr);
        grid-template-rows: auto auto 1fr auto; }}Copy the code

Now that we have 12 columns, we need to tell how many columns each item should occupy:

@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; }}Copy the code

Sidebar: grid-row: 3; Because the sidebar comes after the main part of the DOM.

desktop

For the desktop view, we will use a screen larger than 1020px. Since we already have 12 columns, now we just need to tell it how many columns to use:

@media (min-width: 1020px) {
    .task-3-1 .navigation {
        grid-column: 3 / span 8;
    }
    
    .task-3-1 .main {
        grid-column: 3 / span 8;
    }
    
    .task-3-1 .sidebar {
        grid-column: 2 / 4;
    }
    
    .task-3-1 .ads {
        grid-column: 11 / span 2;
        grid-row: 2 / 4;
    }
    
    .task-3-1 .footer {
        grid-column: 1 / span 12; }}Copy the code

Second option: How do you use grid-template-areas

Before using grid-template-areas, we need to use grid-Area to define project areas:

.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;
}
Copy the code

After the project areas are defined, all we need to do is to locate the container by using grid-template-Areas.

Mobile devices

.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";
}
Copy the code

So on the mobile device, we create 1 column and 6 rows. The third row, the main row, should be as extended as possible.

This also makes it easier to change the order/location of items later if you want to. For example, if we wanted to have navigation in front of the head, we could do this:

. grid-template-areas: "nav" "header" "main" "sidebar" "ads" "footer"; .Copy the code

The tablet

@media (min-width: 720px) {
    .task-3-2.container {
    grid-template-rows: auto auto 1fr auto;
      
    grid-template-areas:
        "header header header"
        "nav nav nav "
        "sidebar main main"
        "ads footer footer"; }}Copy the code

Using the code above, if the screen width is larger than 720px, we want to create 3 columns and 4 rows. The title and navigation each occupy three columns.

On the third and fourth lines, the sidebar and ads occupy one column, and the home and footer occupy two.

desktop

@media (min-width: 1020px) {
    .task-3-2.container {
    grid-template-rows: auto auto 1fr auto;
      
    grid-template-areas:
        "header header header header"
        "sidebar nav nav ads"
        "sidebar main main ads"
        "footer footer footer footer"; }}Copy the code

Here we find similar logic to the tablet view. For the desktop, we created four columns and four rows and laid them out according to the values of grid-template-Areas.

How to choose the two options

Advantages and disadvantages of using a 12-column grid

  • Start simple and fast;
  • Easy to maintain layout of columns in the center;
  • Difficult to arrange items in complex layouts;

You should use a grid layout of 12 columns, which is not very complicated and focuses on the arrangement of columns.

Pros and cons of using grid-template-areas

  • Flexible complex layout;
  • Easy to visualize;
  • It takes more time to implement;

For more complex layouts, you should use grid-template-Areas, where you care about the location or size of many elements.

Both options have pros and cons, but you should choose the one that is easier for you and makes more sense in your particular scenario.

4. How to build a responsive layout without media queries in a CSS grid

This is surprisingly easy to do. We can do this with a line of code like this:

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

We just created a flexible column layout and specified that the column should not be less than 150px and that the space should be evenly shared.

5. How to build a 12 x 12 chess Grid using CSS Grid

For the last task, I want to show you that we can define not only the number of columns, but also the number of rows using CSS Grid.

.task-5.container {
    display: grid;
    height: 100vh;
    
    grid-template-columns: repeat(12.1fr);
    grid-template-rows: repeat(12.1fr);
}
Copy the code

Now, we can put the project anywhere we want:

..task-5 .item-1 {
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
}

.task-5 .item-2 {
    grid-row: 4 / span 3;
    grid-column: 4 / span 3;
}

.task-5 .item-3 {
    grid-row: 7 / span 3;
    grid-column: 7 / span 3;
}

.task-5 .item-4 {
    grid-row: 10 / span 3;
    grid-column: 10 / span 3;
}
Copy the code