CSS Grid 布局是一种强大的 Web 布局方式，是一个基于网格的布局系统，可以非常方便地创建复杂的布局结构。其中，最重要的属性之一是 grid-template-columns，它用于设置网格区域的列宽和起始位置。本文将详细介绍如何使用 grid-template-columns 属性，并给出示例代码，帮助读者更快速地学习和掌握 CSS Grid 布局。
grid-template-columns 属性的语法
grid-template-columns 属性用于定义网格区域的列宽和起始位置。它的语法非常灵活，可以使用多种值来设置列。下面是它的基本语法：
grid-template-columns: <track-size> ...;
其中，<track-size> 指定网格线（Grid Line）之间的距离。可以使用长度（px、em、rem 等）、百分比、fr（表示可用空间的比例）等单位来指定距离。可以设置多个值，表示有多个网格线，网格线之间用空格分隔开。
在 grid-template-columns 中，还可以使用 repeat() 函数，来简化代码。例如，下面的语法表示将 10px、20px 和 30px 的列分别重复 3 次：
grid-template-columns: repeat(3, 10px 20px 30px);
在 repeat() 函数中，第一个参数表示重复的次数，第二个参数则是被重复的值。
设置网格区域的列宽和起始位置
现在，我们来使用 grid-template-columns 来设置网格区域的列宽和起始位置。首先，让我们创建一个包含 4 个网格项的 HTML 元素，并给它们一个固定的宽度和高度。这里使用 display: grid 属性将其转换为网格布局：
<div class="grid-container"> <div class="grid-item-1">1</div> <div class="grid-item-2">2</div> <div class="grid-item-3">3</div> <div class="grid-item-4">4</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ------ -------- ----- --------- ----- - ------------ - ------------ - - -- --------- -- - ------------ - ------------ - - -- --------- - - -- - ------------ - ------------ -- --------- - - -- - ------------ - ------------ -- --------- -- -
如上所示，我们使用 grid-template-columns: 100px 100px 100px; 来设置网格区域的列宽为 100px，并且划分了 3 个列。这意味着在网格布局中，一行中有 3 个列：
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}示例代码中，我们在网格布局中设置了 4 个网格项目，每个项目的宽度为 100px。这样，我们可以轻松地将网格区域划分为 3 个等宽的列。
使用 fr 单位设置网格区域的列宽比例
除了使用固定的单位值来设置列宽之外，还可以使用 fr 单位来设置给定可用空间中每个网格区域的比例。例如，下面的语法将网格区域分成两个相等的部分：
grid-template-columns: 1fr 1fr;
1fr 单位表示可用空间的一等份。因此，该语法将可用空间平均分成两个部分。
需要注意的是，由于 fr 单位是相对于可用空间的，因此在使用它时需要非常小心，以免出现布局问题。
总结
CSS Grid 布局是一种强大的 Web 布局方式，可以非常方便地创建复杂的布局结构。其中，grid-template-columns 属性用于定义网格区域的列宽和起始位置，其语法非常灵活，可以使用多种值来设置列。通过详细的学习和实践，我们可以更好地掌握 CSS Grid 布局，并为我们的 Web 应用程序创建出更加独特和强大的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664a1ed3d3423812e490e189