css布局grid-template-columns属性

grid-template-columns属性可以用于创建一个网格布局，以下是使用此属性的步骤：

1. 首先在网格容器上使用 display: grid; 将其转换为网格容器。

2. 然后使用 grid-template-columns 属性来定义列的数量和大小。例如，使用 “grid-template-columns: 1fr 2fr 1fr;” 将创建一个有三列的网格，其中第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。

3. 您还可以在列之间添加空白间距，如 “grid-template-columns: 1fr 20px 2fr 20px 1fr;” 将在第一列和第二列之间，第二列和第三列之间，以及第三列和第四列之间添加20像素的空白间距。

4. 如果您需要更复杂的布局，则可以在 grid-template-columns 属性中使用重复函数。例如，“grid-template-columns: repeat(3, 1fr 2fr);” 将创建一个有6列的网格，其中每个重复的模式包含1个1fr列和1个2fr列。

5. 您还可以将 grid-template-columns 属性设置为 auto，表示列的大小将根据内容自动调整。

总之， grid-template-columns 属性是用于定义网格列数量和大小的非常有用的属性，在创建具有复杂布局的网站时非常有用。

以下是一个使用 grid-template-columns 属性的例子。

HTML 代码：

<div class="grid-container">
  <div class="item item-1">Item 1</div>
  <d