CSS Grid 布局是一种强大的布局方式，它允许我们在网页中创建灵活的网格布局。其中，grid-template-columns 和 grid-template-rows 是两个非常重要的属性，它们可以帮助我们设置网格的大小和形状。在本文中，我们将详细介绍如何使用这两个属性来创建网格布局。
grid-template-columns 和 grid-template-rows 属性
grid-template-columns 和 grid-template-rows 属性用于设置网格的列和行。它们都使用一系列值来定义网格的大小和形状。这些值可以是长度单位、百分比、fr（分数）等。
下面是一个示例：
--------------- - -------- ----- ---------------------- ----- --- ---- ------------------- ---- ------ -
在这个示例中，.grid-container 元素被设置为网格容器，grid-template-columns 属性定义了三个列，分别为 100px、1fr 和 2fr。其中，1fr 表示剩余空间的比例，2fr 表示剩余空间的两倍。grid-template-rows 属性定义了两行，分别为 50px 和 100px。
设置网格的大小和形状
使用 grid-template-columns 和 grid-template-rows 属性可以非常方便地设置网格的大小和形状。下面是一些示例：
等宽等高的网格
--------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- -
在这个示例中，.grid-container 元素被设置为一个 3x3 的网格，每个单元格的宽度和高度都相等，都是剩余空间的三分之一。
不等宽不等高的网格
--------------- - -------- ----- ---------------------- ----- --- ---- ------------------- ---- ------ -
在这个示例中，.grid-container 元素被设置为一个 2x3 的网格，第一行有三个单元格，分别为 100px、1fr 和 2fr。第二行有两个单元格，分别为 50px 和 100px。
自适应网格
--------------- - -------- ----- ---------------------- ---------------- ------------- ------ -
在这个示例中，.grid-container 元素被设置为自适应网格，即单元格的宽度会自动调整以适应容器宽度。repeat(auto-fit, minmax(100px, 1fr)) 表示单元格的最小宽度为 100px，最大宽度为剩余空间的比例。
总结
grid-template-columns 和 grid-template-rows 属性是 CSS Grid 布局中非常重要的属性，它们可以帮助我们设置网格的大小和形状。我们可以使用长度单位、百分比、fr（分数）等来定义网格的列和行。通过设置这些属性，我们可以轻松地创建灵活的网格布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66022569d10417a222d8b674