作为前端开发者，我们经常需要使用 HTML 模板来构建网页。然而，当模板被设计成多列或多行布局时，往往需要耗费很长时间来手动进行布局。这时候，CSS Grid 布局可以大大地简化我们的工作，提高开发效率。
什么是 CSS Grid 布局
CSS Grid 布局是一个比传统的基于盒模型的布局更加高效、灵活的布局方法。它可以将网页布局分割成多个单元格，可以跨行和跨列的定位元素，并且可以自适应调整单元格的大小。
控制单元格大小
想要控制单元格的大小，我们需要定义单元格的高度和宽度。通过使用 CSS Grid 布局，我们可以为网格设置行高和列宽：
.grid-container {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
}通过使用 grid-template-rows 和 grid-template-columns 属性，我们可以分别定义行和列的大小，并且可以使用关键字 fr 来指定网格单元格的比例关系。
实现 HTML 模板选择器
现在，我们来实现一个 HTML 模板选择器，它能够实现在一个多列布局的基础上选择模板，并自动调整单元格大小。具体实现如下：
-- -------------------- ---- -------
--------- -----
------
------
----------- -------------
-------
--------------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
-
---------- -
------- --- ----- -----
-------- -----
----------- -------
---------- -----
-
------------------- -
----------------- --------
------ -----
-
--------
-------
------
-------- ----------
---- -----------------------
---- ------------------
------ ------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- ------------------
------ ------
------ -- ------- ------ ---------- -- ------ -- ------ ----- -----------
------
---- ------------------
------ ------
----- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------
---- ------------------
------ ------
------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- -------------
------
------
--------
----- --------- - ----------------------------------------
--- ---------------- - -----
-------------------------- -- -
---------------------------------- -- -- -
-- ----------------- --- ----- -
----------------------------------------------
-
---------------- - ---------
-----------------------------------
---
---
---------
-------
-------在上述代码中，我们定义了一个 grid-container 类，使用 grid-template-rows 和 grid-template-columns 属性来定义网格大小。每个网格单元格是一个 grid-item 类，并且在单击单元格时给该单元格添加一个 selected 类，以便显示为选定状态。
总结
CSS Grid 布局是一种高效、灵活的布局方法，可以大大提高我们的开发效率，并且可以用于各种布局需求的设计。在实现 HTML 模板选择器时，我们可以看到 CSS Grid 布局的强大之处，它使我们能够轻松地实现多列布局，并自适应调整单元格大小，让我们的网页更加美观、易于使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664ff686d3423812e41cc390