CSS Grid Container

❮ Previous Next ❯

1

2

3

4

5

6

7

8

Try it Yourself »

Grid Container

A grid layout consists of a parent element (the grid container), with one or more child elements (grid items).

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Grid Tracks

The rows and columns of a grid is defined with the grid-template-rows and the grid-template-columns properties (or the shorthand grid or grid-template properties).

These define the grid tracks. A grid track is the space between two grid lines.

The grid-template-columns Property

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.

The value is a space-separated-list, where each value defines the width of the respective column.

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.

Example

Make a grid with 4 columns:

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

Try it Yourself »

Note: If you have more than 4 grid items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The grid-template-columns property can also be used to specify the exact size (width) of the columns, or a mix of fixed size and auto.

Example

Set a fixed size for column 1, 2, and 4, and keep column 3 as auto size:

.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

Try it Yourself »

The grid-template-rows Property

The grid-template-rows property defines the height of each row.

1

2

3

4

5

6

7

8

The value is a space-separated-list, where each value defines the height of the respective row:

Example

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

Try it Yourself »

The justify-content Property

The justify-content property is used to align the whole grid inside the container.

1

2

3

4

5

6

Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.

Example

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

Try it Yourself »

Example

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

Try it Yourself »

Example

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

Try it Yourself »

Example

.grid-container {
display: grid;
justify-content: center;
}

Try it Yourself »

Example

.grid-container {
display: grid;
justify-content: start;
}

Try it Yourself »

Example

.grid-container {
display: grid;
justify-content: end;
}

Try it Yourself »

The align-content Property

The align-content property is used to vertically align the whole grid inside the container.

1

2

3

4

5

6

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

Example

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

Try it Yourself »

Example

.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}

Try it Yourself »

Example

.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}

Try it Yourself »

Example

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}

Try it Yourself »

Example

.grid-container {
display: grid;
height: 400px;
align-content: start;
}

Try it Yourself »

Example

.grid-container {
display: grid;
height: 400px;
align-content: end;
}

Try it Yourself »