Deep Tech Point
first stop in your tech adventure
A tutorial about CSS grid container properties and their values in less than 10 minutes
July 12, 2021 | CSS

In this article, we are going to dive a bit deeper into a CSS grid layout – we will explain what is a grid container and we will learn even more about properties that are closely connected to the grid container aka parent properties, and their values that precisely define the grid layout. We will get to know:

We will show you a few examples so you can see how these properties and their values behave in a grid layout.

What is a grid container?

A grid container is an HTML element with a set display property of that element to grid or inline-grid. As we set a display property of an HTML element, all direct children of that element become grid items. A grid container embodies grid items that are placed inside columns and rows of a grid. If you want to read more about grid items you should read A complete guide to CSS grid items’ properties and their values.

What properties are connected to the grid container?

We’ve already mentioned in the introduction properties that are connected to the grid container. Let’s take a look at these properties and how you can manipulate them through a few examples.

Grid container and display property

When we want to declare a grid container on a HTML element, all children of that HTML element become grid items. We use the following property: display: grid or display: inline-grid

How grid-template-columns property works

The grid-template-columns property has two neat features: with it, you can specify the number of columns in your grid layout, and most of all, the grid-template-columns defines the width of each column. The width values are defined as a space separated list, where we declare each value of the column from left to right side.
If you want your columns to have the same width, define the grid-template-columns with “auto”. In the following example we have a grid with 3 columns where all columns have the same width:

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

If you want to set a specific size for your columns you can do it like so:

.my-grid-container {
  display: grid;
  grid-template-columns: 100px  auto 200px;
}

In the example above the first column will have 100px width, the second will auto adjust according to the space available, and the third column will have exactly 200 px width.
It is also important to bring out that if your grid layout contains 3 columns and if you have more than 3 items to put in a grid, the grid will automatically add a new row.

How grid-template-rows property works

Similar to the grid-template-columns property, the grid-template-rows property determines the height of each row. The values of rows (from upper to lower row) are defined in a space-separated-list. In a example below the upper or first row will have the height of 100px, while the second one will have 200px height:

.my-grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
}

In both grid-template-columns and grid-template-rows the columns and rows of the grid are defined with a space-separated list of values. The values represent the track size, and the space between them represents the grid line:

Grid container and grid-template-areas

grid-template-areas property defines a grid template. This property references the names of the grid areas and they are defined with the grid-area property.
Values in the grid-template-areas property are:

Grid container and grid-template property

grid-template is a handy property that serves as a shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in one single declaration.
Values connected to the grid-template property are:

Grid container and gap-related properties, such as column-gap, row-gap, grid-column-gap, grid-row-gap

All gap-related properties define the size of the grid lines, just like setting the width of the gutters between the rows or columns, however not on the outer edges of a grid.

Values for column-gap and row-gap are:

row-gap and column-gap densed in a gap or grid-gap property

A shorthand for row-gap and column-gap is gap or grid-gap, with a space-separated value:

Grid container and justify-items property

justify-items property aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block (column) axis). The value that you set defines all grid items inside the container. Possible values that you can add to the justify-items property are:

As already said, justify-items property defines all grid items inside the container, but maybe you need this same behavior to be defined on individual grid items. This, of course, can be done via the justify-self property.

Grid container and align-items property

As opposed to justify-items property which aligns along the inline (row) axis, the align-items property aligns all grid items along the block (column) axis. Similar to the justify-items property, when setting the value of the align-items property, the defined value applies to all grid items inside the container. If you, however, want to define the behavior on a specific grid item, you can do it by using the align-self property.
The values you can apply on the align-items property are similar to those of the justify-items property:

Grid container and place-items property

A shorthand for both the align-items and justify-items properties in a single declaration is place-items property.
The values for place-items property are set like so:

Grid container and the justify-content property

The justify-content property aligns the grid along the inline (row) axis. We apply the justify-content property when we want to align the whole grid inside the container. However, for the justify-content property to have an effect, the grid’s total width has to be less than the width of the container.

.my-grid-container {
  display: grid;
  justify-content: space-evenly;
}

In the example above the value “space-evenly” will give the grid columns an equal amount of space between, and around them – the grid content is spaced evenly horizontally within the container element.
There are other values connected to the justify-content, too:

Grid container and the align-content property

The align-content property aligns the grid along the block (column) axis, as opposed to justify-content which aligns the grid along the inline (row) axis. In other words, we use the align-content property to vertically align the whole grid inside the container, however for the align-content property to have an effect, the grid’s total height has to be less than the container’s height.
The following example shows usage of the align-content property to vertically align the grid inside the container – the rows will be aligned in the middle of the container with the value “center”:

.my-grid-container {
  display: grid;
  height: 300px;
  align-content: center;
}

There are other values connected to the align-content, too:

How to define place-content property?

place-content property joins both the align-content and justify-content properties in a single declaration. The values for the place-content property are set like so:

What is grid-auto-columns and grid-auto-rows property?

grid-auto-columns and grid-auto-rows property defines the the size of any implicit or auto-generated grid tracks. FYI, implicit or auto-generated grid tracks are auto created in a situation when:

The values of grid-auto-columns and grid-auto-rows property are defined through a track-size, which can be expressed through a length, a percentage, or a fraction of the free space in the grid (the fr unit).

What you need to know about grid-auto-flow property?

As the name of the property says, grid-auto-flow property belongs to the auto-placement algorithm that automatically places the items on the grid. You can use the grid-auto-flow property when you have grid items that you didn’t place on the grid and you need to define the work of the auto-placement algorithm.
The grid-auto-flow property can contain the following values:

grid property – shorthanding several properties

grid property is a shorthand for setting all of the following properties in a single declaration:

However, you should know you can only define either the explicit or the implicit grid property in a single grid declaration.
Values that can be set through the grid property are: