CSS Grid

Grid tracks

We can define the number and lengths of rows and columns using the grid-template-columns and grid-template-rows properties.

We can use any of the normal length units, in addition to a grid special unit fr, which is explained in more detail in the fractional unit section.

The space between any two lines in the grid is called a track. In the example grid below the highlighted teal area is a track.

cell

cell

cell

cell

cell

--------------- track ---------------

Syntax

The value of the grid-template-columns and grid-template-rows properties is a list of length units separated by whitespace.

grid will make sure to size the columns and rows that have explicitly set lengths to their specified values, and will by default size all other items according to their content.

Copy
selector {
  display: grid;
  grid-template-columns: length-unit length-unit ...;
  grid-template-rows: length-unit length-unit ...;
}

Code example: rows

In this example we have specified that the first two rows should be 50px in height. If the content within those rows exceed the specified height, they will not expand but rather create overflow.

The last row (blue) does not have an explicitly set height and as a result is sized according to its contents.

Copy
.wrapper {
  display: grid;
  grid-template-rows: 50px 50px;
}

red

green

Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras semper auctor neque, vitae tempus quam pellentesque nec nam aliquam? Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam!

Code example: rows and columns

Copy
.wrapper {
  display: grid;
  grid-template-rows: 25% 50% 25%%;
  grid-template-columns: 25% 50% 25%%;
}

1, 1

2, 1

3, 1

2, 1

2, 2

3, 2