CSS Grid 布局是一种强大的布局系统，它允许我们创建各种不同的网格布局。其中，grid-template-columns 和 grid-template-rows 是两个非常重要的属性，它们用于定义网格的列和行。
如果我们想要创建一个具有相同宽度和高度的网格，我们可以使用 grid-template-columns 和 grid-template-rows 属性。下面是如何实现的具体步骤。
第一步：定义网格的列和行
我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，下面的代码将创建一个具有 3 列和 3 行的网格，每个单元格的宽度和高度都为 100 像素：
.grid { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); }
这里我们使用 repeat() 函数来定义重复的列和行。repeat() 函数接受两个参数：重复次数和每个重复项的大小。在这个例子中，我们重复了 3 次，每个重复项的大小为 100 像素。
第二步：设置单元格的大小
接下来，我们需要设置每个单元格的大小，以确保它们具有相同的宽度和高度。我们可以使用 grid-template-columns 和 grid-template-rows 属性来设置单元格的大小。例如，下面的代码将创建一个具有 3 列和 3 行的网格，每个单元格的宽度和高度都为 100 像素：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ----- - ------ ------ ------- ------ -展开代码
在这个例子中，我们使用 width 和 height 属性来设置单元格的大小，每个单元格的宽度和高度都为 100 像素。请注意，我们设置单元格的大小与我们在 grid-template-columns 和 grid-template-rows 中设置的大小相同。
示例代码
下面是一个完整的示例代码，它创建了一个具有 3 列和 3 行的网格，每个单元格的宽度和高度都为 100 像素：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ---- ------------ ------- ----- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ----- - ------ ------ ------- ------ ------- --- ----- ------ - -------- ------- ------ ---- ------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------ ------- -------展开代码
在这个例子中，我们创建了一个具有 3 列和 3 行的网格，每个单元格的宽度和高度都为 100 像素。我们还为每个单元格设置了一个边框，以使它们更容易看到。
总结
在 CSS Grid 布局中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来创建具有相同宽度和高度的网格。我们只需要定义网格的列和行，然后设置单元格的大小即可。使用这种方法，我们可以轻松地创建各种不同的网格布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fe5f8dd10417a2229a24a7
