Grid Tracks

CSS Grid Tracks (Rows and Colums)

Inside the grid container you define the number and size of the grid columns and rows.

For this, we will use the following properties:

• grid-template-columns - Defines the number and width of the columns in the grid

• grid-template-rows - Defines the number and height of the rows in the grid

• grid-template-areas - Defines how to display columns and rows, using named grid items

The CSS grid-template-columns Property

The grid-template-columns property defines the number and width of the columns in the grid.

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

Common values are:

• Fixed lengths (100px 300px 200px)

• Percentages (20% 60% 20%)

• fr unit (1fr 2fr 1fr)

• auto (auto auto auto)

• repeat() (repeat(3, 1fr))

• minmax() (minmax(80px, 1fr) 150px 150px)

CSS grid-template-columns: auto

To create a grid layout with 3 columns of equal width, use the "auto" keyword.

Example

.container {

    display: grid;

  grid-template-columns: auto auto auto;
}

Grid Columns with Mixed Width

To create a grid layout with 3 columns: 2 columns with a fixed width, and 1 column with size "auto".

Example

.container {

    display: grid;

  grid-template-columns: 80px 200px auto;
}

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

Grid Columns with the fr Unit

The fr unit stands for "fraction". This unit automatically divides the available space into fractions.

1fr will take 1 fraction of the available space, while 2fr will take 2 fractions of the available space.

Example

.container {

    display: grid;

  grid-template-columns: 1fr 1fr 1fr;
}

Example

.container {

    display: grid;

  grid-template-columns: 1fr 2fr 1fr;
}

Grid Columns with the repeat() Function

The CSS repeat() function is used to repeat a set of columns or rows in a grid.

Example

.container {

    display: grid;

  grid-template-columns: repeat(3, 1fr);
}

Grid Columns with the minmax() Function

The CSS minmax() function is used to define a size-range greater than or equal to a min value and less than or equal to a max value.

Example

.container {

    display: grid;

  grid-template-columns: minmax(80px, 1fr) 150px 150px;
}

The CSS grid-template-rows Property

The grid-template-rows property defines the number and height of the rows in the grid.

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

Common values are:

• Fixed lengths

• Percentages

• fr unit

• auto

• min-content

• max-content

• repeat()

• minmax()

• fit-content()

Example

.container {

    display: grid;

  grid-template-rows: 80px 200px;
}

Notice that the first row in the grid above is 80px high and the second row is 200px high. The next rows will use auto as default.