CSS Grid Container

Grid Container

A grid container contains one or more grid items arranged in columns and rows.

Direct child elements(s) of the grid container automatically becomes grid items.

An 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 adjacent 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 of equal width:

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

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; }

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-rows Property

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

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; }

The justify-content Property

The justify-content property is used to align the grid items when they do not use all available space on the main-axis (horizontally).

The justify-content property can have one of the following values:

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

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

Example

The space-evenly value displays the grid items with equal space around them:

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

Example

The space-around value displays the grid items with space around them:

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

Example

The space-between value displays the grid items with space between them:

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

Example

The center value positions the grid items in the center of the container:

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

Example

The start value positions the grid items at the start of the container:

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

Example

The end value positions the grid items at the end of the container:

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

The align-content Property

The align-content property is used to align the grid items when they do not use all available space on the cross-axis (vertically).

The align-content property can have one of the following values:

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

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

In the following examples we use a 400 pixels high container, to better demonstrate the align-content property.

Example

The center value positions the grid items in the middle of the container:

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

Example

With space-evenly, the grid lines are evenly distributed in the grid container, with equal space on top, bottom and between:

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

Example

With space-around, the space between the grid lines are equal, but the space before the first grid item and after the last grid item is set to half of the space between the grid lines:

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

Example

With space-between, the space between the grid lines are equal, but the first grid item is flush with the start edge of the container, and the last grid item is flush with the end edge of the container:

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

Example

The start value positions the grid items at the start of the container:

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

Example

The end value positions the grid items at the end of the container:

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

The place-content Property

The place-content property is a shorthand property for the align-content and the
justify-content properties.

If the place-content property has two values:

  • place-content: start center; – the align-content value is ‘start’ and
    justify-content     value is ‘center’

If the place-content property has one value:

  • place-content: end; – both align-content and
    justify-content     values are ‘end’

Note: The grid item’s total height and width has to be less than the container’s height and width for the place-content property to have any effect.

Example

The center value positions the grid items in the middle of the container (both vertically and horizontally):

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

Example

The end space-between value aligns the grid lines towards the bottom of the grid container, and aligns the grid items with the same space between them horizontally:

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

CSS Grid Container Properties

Property Description
align-content Vertically aligns the whole grid inside the container (when total grid size is smaller than container)
align-items Aligns content in a grid item along the column axis
display Specifies the display behavior (the type of rendering box) of an element
column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
justify-content Horizontally aligns the whole grid inside the container (when total grid size is smaller than container)
place-content A shorthand property for the align-content and the justify-content properties
row-gap Specifies the gap between the grid rows