CSS grid-template-columns

Previous Next

Demo of the different values of the grid-template-columns property.

Click the property values below to see the result:

grid-template-columns: auto auto;
grid-template-columns: auto auto auto;
grid-template-columns: 50px 100px;
grid-template-columns: 10% 10% 10%;
grid-template-columns: max-content max-content;
grid-template-columns: fit-content(80px) auto fit-content(100px);
grid-template-columns: repeat(2, 60px 1fr);
1
20
3
4
500
6
1
20
3
4
500
6
1
20
3
4
500
6
1
20
3
4
500
6
1
20
3
4
500
6
1
20
3
4
500
6
1
20
3
4
500
6

Play more with the code in our Tryit yourself editor: Try it Yourself ❯