In the world of web development, the layout and design of a web page play a significant role in its success. CSS offers several ways to achieve the desired layout, and in the previous article, we explored the flexibility of CSS Flexbox and I did explain how Flexbox is more flexible than positions.

Guess what! We have one more worthy layout CSS Grid. It's pretty much similar to Flexbox, the only difference is Flexbox is a one-dimensional layout, but Grid is a two-dimensional system. In this article, we will focus on CSS Grid layout and its properties for both the parent (the grid container) and child (the grid items) elements.

Before going ahead, you will reqiure to have some prior knowledge of CSS basics. If you're new to CSS, you can check out my article, Introduction to CSS which covers the basics of CSS & its usage in web design. Additionally, I suggest that you read my article Understanding the CSS Box Model to get a better understanding of how CSS layouts work.

Let's see what grid layout has to offer us. By the end of this article, you'll have a thorough understanding of the CSS Grid layout and how to use it to create dynamic and responsive layouts. You can also find a link to the code files related to this article at the end.

So, let's get started with CSS Grid!

CSS Grid?

A more advanced layout that gives us the liberty to manage our content in two dimensions, as rows and columns. We can control and place each child item in the grid by defining the number of columns and rows.

Getting Started:

First, we need to add display: grid; to the parent element (container) and every child element inside this container will be a grid item (like we saw in Flexbox).

Like flexbox, CSS Grid also has properties for both parent element and its child elements. Lets see each ones properties one by one.

Properties for the Parent (Grid Container)

grid-template-columns: & grid-template-rows:

With these properties, we can define how many columns and rows we want in our Container (parent element). The size of columns and rows can be a length in pixels, a percentage, or the fr unit a fraction of free space in the grid (You can learn this fr unit here at DigitalOcean.)

Syntax:

.container {
  grid-template-columns: ...  ...;
  grid-template-rows: ... ...;
}

grid-template: (Shorthand)

Shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Syntax:

.container {
  grid-template: <grid-template-rows> / <grid-template-columns>;
}

Let's see how we are gonna use it.

Example:

We want 3 columns and 3 rows, the columns are with different widths and each row has a height of 100px. So there will be 9 Grid.

.container{
  grid-template-columns : 90px 80px 100px;
  grid-template-rows : 100px 100px 100px;
}

The above Syntax is equivalent to this:

.container {
  grid-template: 100px 100px 100px / 90px 80px 100px;
}

Both will have the same result as shown below:

There are many ways to assign the values of the size of columns and rows.

• If we need to assign the same values to all our columns or rows (as we did in our above example we set 100px to all 3 rows so instead of that we can do it in a little shortcut by using the repeat() notation.

    .container {
            grid-template-rows: repeat(3, 100px);
               }
  

• The fr unit allows us to set the size in fractions on the free space of the grid container (You can more on this unit here DigitalOcean). For example, if we need 3 rows of equal length in a container, then it will set the item to one-third the height of the grid container.

    .container {
      grid-template-rows: 1fr 1fr 1fr;
    }
  

• We can use multiple types of values at once. The free space is calculated after any fixed sizes of items. In this example 1fr 1fr for 2 rows will be calculated and divided into two parts after assigning the size of the 3rd row 100px height.

    .container {
      grid-template-rows: 1fr 1fr 100px ;
    }
  

---

row-gap: & column-gap:

As the name suggests that these properties will provide a gap between columns and rows. These gaps are nothing but grid lines we will see later what are grid lines.

Syntax:

.container {
  column-gap: <line-size>;
  row-gap: <line-size>;
}

gap: (Shorthand)

A shorthand for row-gap and column-gap

Syntax:

.container {
  gap: <grid-row-gap> <grid-column-gap>;
}

Example:

.container{
  grid-template-columns : 90px 80px 100px;
  grid-template-rows : 100px 100px 100px;
  row-gap: 10px;
  column-gap: 20px;
}

The above Syntax is equivalent to this:

.container{
  grid-template-columns : 90px 80px 100px;
  grid-template-rows : 100px 100px 100px;
  gap: 10px 20px;
}

Note:

• We define row height then column width in shorthand properties.

• In shorthand properties, if no row-gap is specified, it’s set to the same value as column-gap.

• The gaps are only created between the columns/rows, not on the outer edges.

---

Have a look at the demonstration in code pen about the Shorthand grid-template: & gap: property:

---

justify-items: & align-items:

These properties are similar to the Flexbox align-items article. They will align grid items into their own cells.

Syntax:

justify-items: aligns grid items along the inline (Horizontal axis).

.container {
  justify-items: start | end | center | stretch;
}

align-items: aligns grid items along the block (Vertical axis).

.container {
  align-items: start | end | center | stretch;
}

place-items: (Shorthand)

place-items sets both the align-items and justify-items properties in a single declaration. If set only one value, then it will be assigned to both properties.

Syntax:

.container {
  display: grid;
  place-items: <align-items> / <justify-items>;
}

Each one of them has the same values. Let's see examples to understand it better:

Remember in output image. The whites lines are added only for clarity to represent grid-lines for proper visual understanding.

1. stretch; (Default value) fill the whole available space of the cell

    .container {
      justify-items: stretch;
    }
   

   Output:

   

    .container {
      align-items: stretch;
    }
   

   Output:

   

2. start; aligns items at the start of their cell.

    .container {
      justify-items: start;
    }
   

   Output:

   

    .container {
      align-items: start;  
    }
   

   Output:

   

3. end; aligns items at the end of their cell.

    .container {
      justify-items: end;
    }
   

   Output:

   

    .container {
      align-items: end;
    }
   

   Output:

   

4. center; aligns items in the center of their cell.

    .container {
      justify-items: center;
    }
   

   Output:

   

    .container {
      align-items: center;
    }
   

   Output:

   

---

justify-content: & align-content:

We use these properties to align the grid (items in the whole group) within the container when the container has a size larger than the total size of the grid. Generally, use when all of the grid items have fixed units like px. These properties are very likely to Flexbox justify-content: & align-content:

justify-content: align the grid along the inline (Horizontal axis).

.container {
  justify-content: stretch | start | center | end | space-around | space-between | space-evenly;    
}

align-content: aligns the grid along the block (Vertical axis).

.container {
  align-content: stretch | start | center | end | space-around | space-between | space-evenly;    
}

place-content: (Shorthand)

A shorthand for align-content and justify-content properties. If set only one value, then it will be assigned to both properties.

.container {
  display: grid;
  place-content: <align-content> / <justify-content>;
}

Each one of them has the same values. Let's see examples to understand it better:

1. start; (default) align the grid at the start edge of the container.

    .container {
      justify-content: start;
    }
   

   Output:

   

    .container {
      align-content: start;    
    }
   

   Output:

   

2. end; align the grid at the end edge of the container.

    .container {
      justify-content: end;    
    }
   

   Output:

   

    .container {
      align-content: end;    
    }
   

   Output:

   

3. center; aligns the grid in the center of the grid container.

    .container {
      justify-content: center;    
    }
   

   Output:

   

    .container {
      align-content: center;    
    }
   

   Output:

   

4. space-around; setting the grid items by placing an equal amount of space between them. with half-sized spaces on both ends.

    .container {
      justify-content: space-around;    
    }
   

   Output:

   

    .container {
      align-content: space-around;    
    }
   

   Output:

   

5. space-between; allocates grid items with equal spaces between them but without leaving any spaces on the far ends.

    .container {
      justify-content: space-between;    
    }
   

   Output:

   

    .container {
      align-content: space-between;    
    }
   

   Output:

   

6. space-evenly; setting the grid items by placing an equal amount of space between them including on both ends.

    .container {
      justify-content: space-evenly;    
    }
   

   Output:

   

    .container {
      align-content: space-evenly;    
    }
   

   Output:

   

---

Properties for the Children (Grid Items)

In grid, there is concept of Grid lines, Grid lines are the horizontal and vertical dividing lines of the grid. Learn more about grid line here.

grid-column-start: &grid-row-start:

grid-column-end:& grid-row-end:

These properties decide the grid item's location within the grid by mentioning a specific grid line.

grid-column-start: &grid-row-start: is the line where the item starts.

grid-column-end:& grid-row-end: is the line where the item ends.

Syntax:

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

grid-column: & grid-row: (Shorthand)

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Example: Let's set Item one's location only and see what happens.

.item.one{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

The above Syntax is equivalent to this:

.item.one{
  grid-column: 1 / 3;
  grid-row: 1 / 3;

Results:

---

justify-self: & align-self:

These property values apply to a grid item inside a single cell. Works exactly like justify-items: & align-items: . The only difference is it only applies to specified grid items, not to all grid items. So we will not go into details to see all their values (they all are the same).

Syntax:

justify-self: aligns the specified grid item along the inline (Horizontal axis).

.item {
  justify-self: start | end | center | stretch;
}

align-self: aligns the specified grid item along the block (Vertical axis).

.item {
  align-self: start | end | center | stretch;
}

place-self: (Shorthand)

place-self: sets both the align-self: and justify-self: properties in a single declaration. If set only one value, then it will be assigned to both properties.

Syntax:

.container {
  display: grid;
  place-self: <align-self> / <justify-self>;
}

Each one of them has the same values. Let's see one example to understand it better:

.item.one{
  place-self: center stretch;
}

Result:

---

Grid Areas

Each cell in the grid is divided by grid lines from all four sides (left, right, top, left). The area between these lines is the grid area.

grid-area:

It's a grid item property used to give a name to an item or grid area that can be referenced by a the grid-template-areas: property.

Name – a name of our choice.

.item {
  grid-area: <name>;
}

grid-template-areas:

It's container property used to define grid template by taking the reference of grid areas specified by the grid-area: property.

Note:

• By repeating the name of grid area we can span those cells

• if we need to leave a grid cell empty we can use dot (.) to define that space.

• We can use as much periods as we want to declare a single empty cell. But if we add space between them it will be no longer single cell.

Have a look at the demonstration in code pen about the Grid Areas to understand better how it works:

---

Conclusion:

We have explored the powerful CSS Grid layout and how it can be used to create complex responsive website layouts. By understanding the grid container and grid item properties, you can create visually stunning designs that are flexible and dynamic.

If you want to have some fun while practicing CSS Grid, I recommend trying out Grid Garden. It's a game that helps you learn the basics of grid layout in a fun and interactive way. You can find the link to the game here: Grid Garden.

Additionally, if you want to further improve your CSS skills, be sure to check out my articles on CSS Positions and CSS Flexbox layouts:

• Introduction to CSS Positions.

• Introduction to CSS Flexbox.

These articles will give you the necessary knowledge to create dynamic layouts for your web pages. By mastering these concepts, you'll be well on your way to creating beautiful and responsive web designs. So keep learning and stay tuned for more!

---

Here link to code source related to this article:- GitHub.

And If you want to learn more about this topic, here are few resources below that you might want to check it out:

• CSS Grid Layout.

• Grid by Example.

Link to Game:- Grid Garden.

Thanks for reading this article. I hope it was helpful to you.😇😇

Please feel free to share your thoughts by leaving a comment below.