什么是 CSS Grid 布局
CSS Grid 布局是一种利用网格化布局来排版的 CSS 技术，它的出现在很大程度上解决了过去使用 Float 和 Flexbox 布局所遇到的限制问题。由于其灵活性和易用性，目前已经成为前端开发中最受欢迎的布局技术之一。
如何使用 grid-template-columns 属性设定列宽
在 CSS Grid 布局中，我们可以使用 grid-template-columns 属性来设置列的宽度。该属性的语法如下：
---------------------- ------------ ------------- ------------ ----
其中，<track-size> 可以指定一个长度、百分比或者一个关键字(如 auto)，用于设定每一列的宽度；<line-name> 可以为该列指定一个名称，用于后续引用。
下面是一个具体的例子：
--------------- - -------- ----- ---------------------- ----- --------- ---- ------ -
上面的代码表示在一个名为 .grid-container 的容器中，第一列的宽度为 100 像素，后面两列宽度相等(默认为 1fr)，最后一列宽度为 100 像素。其中，repeat() 函数表示重复一个指定的单元若干次，这里就是将 1fr 重复了两次。
需要注意的是，单元前后的空格是可选的，但建议加上以增加代码的可读性。
如何使用不同的长度单位
在使用 grid-template-columns 属性时，我们可以使用像素、百分比、 auto、 fr 等多种不同的长度单位。
- 像素(pixel)：常用于固定宽度的列，如
grid-template-columns: 100px 200px 300px; - 百分比(percentage)：按比例分配宽度，如
grid-template-columns: 30% 40% 30%; - 自适应(auto)：根据内容自动调整宽度，如
grid-template-columns: auto auto 1fr; - 自由空间(fr)：根据可用空间的分配比例分配宽度，如
grid-template-columns: 1fr 2fr 3fr;
有时需要动态的调整网格的大小，这时候，建议选用弹性尺寸fr。即，不固定网格的宽度，而让其自动适应容器的大小。
CSS Grid 布局的优势
与传统的布局方式相比，CSS Grid 布局在以下方面具有明显的优势：
- 更灵活：可以自由控制行与列，无需考虑元素在文档流中的位置。
- 更简便：用 CSS 写法就可以实现多种复杂的布局方案，不再需要 JavaScript 的干扰。
- 更高效：大量减少了代码量，页面渲染更快，优化页面性能。
示例代码
下面是一个简单的示例代码，演示了如何使用 grid-template-columns 属性来设定列宽。
--------- -----
------
------
----- ----------------
---------- ---- ------------
-------
---------- -
-------- -----
---------------------- --------- ----- -- ---- --
--------- ----- -- ------- --
-
----- -
----------------- -----
------- ------
-------- -----
-
-------------------- -
----------------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------以上代码中，我们将一个名为 .container 的容器分为三列等宽的网格，然后通过 .item 类名来选中需要放入网格中的元素。
运行示例代码后，我们将会看到如下的网格布局效果：
总结
在日常前端开发中，CSS Grid 布局已经变得越发重要了，它不仅是一个优秀的布局方案，同时也能用来优化性能，而且还大大提升了前端页面的灵活性。在今天的文章中，我们详细介绍了如何使用 grid-template-columns 属性设定列宽，并且讲解了如何使用不同的长度单位。相信大家能够更好的掌握这项技术，开发出更加优秀的前端页面！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6646eb4ad3423812e45202a1