CSS Grid Layout 是一种新的方式来定义网格布局，允许开发者更自由的控制元素的位置和大小，同时还可以更好的响应屏幕大小的变化。其中，grid-template-columns 属性是用来定义网格布局中的列大小和数量的。
使用方法
grid-template-columns 属性可以使用以下几种方式来定义：
- 使用百分比：grid-template-columns: 20% 20% 20% 20% 20%;
- 使用固定的像素值：grid-template-columns: 100px 100px 100px 100px;
- 使用自动填充：grid-template-columns: auto auto auto auto;
- 使用混合：grid-template-columns: 50px auto auto 50px;
除此之外，还可以使用 repeat() 函数来定义，例如：
grid-template-columns: repeat(4, 25%);
上面的代码等价于：
grid-template-columns: 25% 25% 25% 25%;
如果想要指定每列的宽度，也可以使用 repeat() 函数，例如：
grid-template-columns: repeat(4, 50px 100px);
上面的代码等价于：
grid-template-columns: 50px 100px 50px 100px 50px 100px 50px 100px;
还可以使用 minmax() 函数来定义每列的最小和最大宽度，例如：
grid-template-columns: repeat(4, minmax(50px, 200px));
上面的代码表示，每列的宽度最小为 50px，最大为 200px，但是它们之间的宽度可以根据容器的大小而变化。