grid-template-columns

25px 80px 30px

1
2
3
4
5
6
7
8
9

1fr 2fr 1fr .5fr

1
2
3
4
5
6
7
8
9

50% 25% 25%

1
2
3
4
5
6
7
8
9

25px auto 50px

1
2
3
4
5
6
7
8
9

[line-1] 1fr [line-2] 1fr [line-3]

1
2
3
4
5
6
7
8
9

repeat(3, 50px)

1
2
3
4
5
6
7
8
9

repeat(3, 1fr)

1
2
3
4
5
6
7
8
9

1fr repeat(5, 20px) 1fr

1
2
3
4
5
6
7
8
9

repeat( 5, minmax(25px, 40px) )

1
2
3
4
5
6
7
8
9

repeat(auto-fill, 40px)

1
2
3
4
5
6
7
8
9

repeat(auto-fit, minmax(20px, 1fr))

1
2
3
4
5
6
7
8
9

repeat(auto-fill, minmax(20px, 1fr))

1
2
3
4
5
6
7
8
9
Previous
grid-template-areas
Next
grid-template-rows

🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.