在现代 web 开发中，CSS Grid 布局已经变得越来越普遍。CSS Grid 布局是一种强大的、具有灵活性的布局方式，它允许我们在网页中以更自由、更灵活的方式布置元素。
网格布局是将一个区域划分成网格的一种布局方式。这个区域被分为一个或多个行和列，并且可以容易地访问和管理网格内的元素。
在本文中，我们将重点介绍如何使用 CSS Grid 布局中的 grid-template-columns 属性来设置列宽比例和实现具有灵活性的网格布局。
grid-template-columns 属性
grid-template-columns 属性定义一个网格容器中所有列的宽度。其接受一个值字符串，该字符串由列宽组成，以空格分隔。
以下是一个 grid-template-columns 属性的基本示例：
---------- - -------- ----- -- -- - -------- ----- -- ---------------------- ----- ----- ------ -
这个属性的值可以是固定的像素值、百分比、em、rem 等单位。同样，我们可以在值中使用 fr 单位。fr 表示可用空间中的一小部分，定义了相对于其他项目的宽度。
以下是一个 grid-template-columns 属性具有多个固定和相对宽度的示例：
---------- - -------- ----- -- -- - -------- ----------------- --- -- ---------------------- ----- --- ---- -
使用 grid-template-columns 属性，我们可以非常灵活地定义网格的列宽比例。但是，为了更好地理解列宽比例的实用性，我们需要进一步探讨 grid-template-columns 属性。
repeat() 函数
如果需要在网格布局中定义多个相同宽度的列，您不必为每一列显式地指定属性。这种情况下，我们可以使用 repeat() 函数来缩短语法。
以下是一个 repeat() 函数的示例：
---------- - -------- ----- -- -- - ------- ----- -- ---------------------- --------- ------- -
在 repeat() 函数中，第一个参数表示要重复的项目的数量，而第二个参数表示每个重复项目的宽度。
自动生成列
如果不知道有多少列，或者需要动态添加列，您可以使用 auto-fill 和 auto-fit 关键字。这样做的优点是，网格将尽可能多地容纳项目。
auto-fit 关键字创建了一个自动布局，可以自动预留足够的空间来填补所有网格单元。而 auto-fill 关键字将尽可能多地容纳项目，但不会自动添加项目。
下面是 auto-fit 和 auto-fill 的示例：
---------- - -------- ----- -- --------------- -- ---------------------- ---------------- ------------- ------ -- --------------- --------------- -- ---------------------- ----------------- ------- -
minmax() 函数
minmax() 函数接受两个参数，分别是最小值和最大值，它可以在定义列宽度时提供更多的灵活性。
默认情况下，grid-template-columns 宽度是根据内容自动调整的，可以使用 minmax() 函数设置最小值和最大值。这样做的好处是，元素将能够保持其最小大小，而不会因内容太多而延伸到不必要的宽度。
---------- - -------- ----- -- ----------- ---------- --- -- ---------------------- ---------------- ------------- ------ -
实例
现在，我们来看一下 grid-template-columns 属性如何帮助我们实现网格布局的灵活性和可读性。以下是一个列宽度比例为 4:8:4 的网格示例：
---------- - -------- ----- -- -- - ------------- ----------------- --- -- ---------------------- ----- --- ------ -
接下来，我们将使用 auto-fit 关键字，以便在容器中填充尽可能多的项目。
---------- -
-------- -----
-- --------------------------- ----------------- --- --
---------------------- ---------------- ------------- -----
----- ------------ ---- ----- ---------------- ------------- ------
-以上代码将在列宽比例为 4:8:4 的情况下创建一个可以自由添加和删除项目的网格布局。因此，即使在添加新项目后，网格一样具有良好的比例和可读性。
总结
在本文中，我们讨论了 CSS Grid 布局中的 grid-template-columns 属性，它允许我们以精确控制的方式设置网格中列宽的比例。
我们学习了如何使用固定的宽度、相对的宽度、fr 单位、repeat() 函数、auto-fit 和 auto-fill 关键字以及 minmax() 函数来控制网格中列宽的比例。
随着我们越来越多地使用网格布局来构建现代网站，掌握这些技术非常重要。希望您喜欢这篇文章，并对如何使用 grid-template-columns 属性控制网格布局中列的宽度有更好的理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66496a88d3423812e483f883