如何在 CSS Grid 布局中使用 grid-template-columns
CSS Grid 布局是一种新兴的布局方式，它可以很好地解决我们在网页布局中遇到的各种问题。CSS Grid 布局的基本理念是将网页布局划分为多个行和列，然后将各种元素放置到这些行和列中。在 CSS Grid 布局中，我们可以使用 grid-template-columns 属性来定义网页布局的列数和每一列的宽度比例。
grid-template-columns 属性的基本定义
在 CSS Grid 布局中，我们可以使用 grid-template-columns 属性来定义网页布局的列数和每一列的宽度比例。这个属性的语法比较简单，它的基本定义如下所示：
.container {
display: grid;
grid-template-columns: <track-size> ...;
}在这个定义中，<track-size> 指的是每一列的宽度比例。它的取值可以是一个具体的像素值或者是一个相对长度值。如果我们要定义多个列，可以在 grid-template-columns 的属性值中使用多个 <track-size>，它们之间使用空格隔开。
grid-template-columns 属性的实例
下面是一个简单的例子，它展示了如何使用 grid-template-columns 属性来定义一个简单的网页布局：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ----- ------ - ----- - ----------------- ----- ------- ----- -
在这个例子中，我们定义了一个 display: grid; 的容器。然后使用 grid-template-columns: 100px 100px 100px; 属性来定义了三个等宽的列。最后，我们在容器中放置了三个 <div> 元素，并将它们的背景色设置为蓝色。由于我们已经定义了三列，所以我们的三个 <div> 元素会自动地被放置到这三列中。
使用网格模板函数定义网页布局
除了直接定义列的宽度比例之外，我们还可以使用网格模板函数来定义网页布局。网格模板函数可以让我们更加灵活地定义网页布局，它可以根据不同的条件动态地生成不同的列宽。常用的网格模板函数如下所示：
.container {
display: grid;
grid-template-columns: repeat(n, <track-size>);
grid-template-columns: minmax(min, max);
grid-template-columns: fit-content(<track-size>);
grid-template-columns: auto-fit;
grid-template-columns: auto-fill;
}这些网格模板函数可以根据不同的需求帮助我们更加方便地定义网页布局。例如，如果我们想要创建一个四列等宽的网页布局，可以使用 repeat(4, 1fr) 函数：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}网页布局实例
下面是一个完整的网页布局实例。这个例子中，我们使用了网格模板函数和网格行跨度（grid-row）属性来定义一个动态的网页布局。不同的图片元素会根据自身的宽高比和容器的大小动态地调整宽度和高度。代码如下所示：
-- -------------------- ---- -------
---- ------------------
---- ------------ ---------------- - - ---- ----
---- ------------------------------------ -------
------
---- -------------
---- ----------------------------------- -------
------
---- -------------
---- ----------------------------------- -------
------
---- -------------
---- ------------------------------------ -------
------
---- ------------ ---------------- - - ---- ----
---- ------------------------------------ -------
------
---- -------------
---- ----------------------------------- -------
------
-------- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- -------- ----- - ----- - --------- ------- -------------- ---- - ----- --- - -------- ------ ------ ----- ------- ----- ----------- ------ -
在这个例子中，我们首先创建了一个 display: grid; 的容器。然后使用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 属性来定义了一个动态的网页布局。其中 auto-fit 表示自动适应容器宽度，minmax(300px, 1fr) 表示每一个列的最小宽度为 300px，最大宽度为 1fr。
然后我们在容器中放置了 6 个 <div> 元素，并将它们的背景色设置为白色。由于我们已经定义了动态的网页布局，因此这 6 个元素会根据容器的宽度和高度自动排列。
最后，我们在每一个 <div> 元素中放置了一张图片，并使用 object-fit: cover; 属性来让图片适应元素的大小。
总结
本文主要介绍了如何在 CSS Grid 布局中使用 grid-template-columns 属性来定义网页布局的列数和每一列的宽度比例，并且介绍了网格模板函数和网格行跨度（grid-row）属性的使用。通过深入地理解 CSS Grid 布局的基本原理和实际应用，我们可以更加方便地设计和开发网页布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6652d513d3423812e475ba89