Deep Tech Point - learn tech easy way

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:

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-content
align-content

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:

track-size (for rows and columns) can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
line-name is an arbitrary name of your choosing

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:

when you use the grid-area-name property you repeat the name of a grid area and you cause the content to span those cells
. or a period signifies an empty grid cell
in addition to the values explained above, you can also use values which means no grid areas will be defined

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:

none when you want to define all three properties to their initial values
<grid-template-rows> / <grid-template-columns> will define grid-template-rows and grid-template-cloumns to the specified values, and will specify the grid-template-areas to none

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:

line-size (for rows and columns), which represents a length value

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-row-gap> <grid-column-gap> which represents length values for each property

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:

“start” value will align all items with the start edge of their cell
“end” value will align all items with the end edge of their cell
setting a value to “center” will align items in the center of their cell
setting a “stretch” value will fill the whole width of the cell, which is default value if the justify-items property isn’t defined

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:

“start” value will align all items with the start edge of their cell
“end” value will align all items with the end edge of their cell
setting a value to “center” will align items in the center of their cell
setting a “stretch” value will fill the whole height of the cell, which is default value if the align-items property isn’t defined

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:

<align-items> / <justify-items> where the first value will define the <align-items>, and the second value will set the <justify-items> property values. If you do not declare the second value, CSS will assign the first value to both properties.

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:

the value “space-around” will give equal amount of space around the columns
the value “space-between” will give equal amount of space between the columns
the value “center” will align the grid in the middle of the container
the value “start” will align the grid at the beginning of the container
the value “end” will align horizontally to the far edge of the container element
the value “stretch” resizes the grid items to allow the grid to fill the full width of the grid container

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:

the value “space-evenly” will give equal amount of space bewteen and around the each grid item, including the far ends
the value “space-around” will give an equal amount of space around the rows, with half-sized spaces on the far ends
“space-between” value gives an equal amount of space between the rows with no space at the far ends
the “start” value aligns all rows at the beginning of the container – the grid is flush with the start edge of the grid container
the “end” value will align the rows at the end of the container – grid is flush with the end edge of the grid container
the “stretch” value resizes the grid items to allow the grid to fill the full width of the grid container

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:

<align-content> / <justify-content> – the first value sets align-content, the second value justify-content. If you do not declare the second value, the first value is assigned to both properties.

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:

there are more grid items than cells in the grid
when a grid item is placed outside of the explicit grid.

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:

the default value in the grid-auto-flow property is “rows”, which fills in each row in turn, and adds new rows as necessary.
“column” value directs the grid-auto-flow property to fill in each column in turn, and adds new rows as necessary.
“dense” value directs the auto-placement algorithm to fill in holes earlier in the grid if smaller items come up later.

grid property – shorthanding several properties

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

grid-template-rows,
grid-template-columns,
grid-template-areas,
grid-auto-rows,
grid-auto-columns, and
grid-auto-flow.

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:

if you don’t define a value, all all sub-properties are defined to their initial values.
the grid-template value works the same as the grid-template shorthand – it defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
grid-template-rows / [ auto-flow && dense? ] grid-auto-columns? defines the grid-template-rows to the specified value. When the “auto-flow keyword is positioned to the right of the slash, it specifies the “grid-auto-flow” to column. And if the “dense” keyword is also defined, the auto-placement algorithm applies a “dense” packing algorithm. The third option is to omit the grid-auto-columns, it is set to auto.
[ auto-flow && dense? ] ? / defines the grid-template-columns to the specified value. When the “auto-flow” keyword is positioned to the left of the slash, it sets “grid-auto-flow” to row. And if the “dense” keyword is also defined, the auto-placement algorithm applies a “dense” packing algorithm. The third option is to omit the grid-auto-columns, it is set to auto.

A tutorial about CSS grid container properties and their values in less than 10 minutes