CSS Grid Columns

The CSS Grid Columns property is used to define the number and size of columns in a grid layout.

Columns are created using the grid-template-columns property. The supporting concepts are explained in CSS Grid Rows and CSS Grid Gap.

With Grid Columns, you can:

• Create multiple columns
• Set fixed column widths
• Create flexible columns
• Mix fixed and flexible sizes
• Build responsive layouts

This property is one of the most important parts of CSS Grid.

Syntax

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