CSS Grid 是一种强大的 CSS 布局模块，它使得网页布局变得更加灵活、精确，同时易于维护和修改。相比于传统的盒子模型，CSS Grid 提供了更多的布局选项和控制方法。本文将介绍 CSS Grid 的概念和基本用法入门教程，帮助您理解如何使用它来创建网页布局。
什么是 CSS Grid？
CSS Grid 是一个二维网格系统，可以将网页布局分成网格，然后通过定义行和列来控制网格中各个元素的位置和大小。与传统的布局方式相比，CSS Grid 更加灵活和精确，可以创建复杂的布局结构，并且不需要使用 float 或者 position 等属性。
基本用法
定义网格
要使用 CSS Grid，首先需要定义一个网格容器。可以通过将 display 属性设置为 grid 或者 inline-grid 来创建网格。然后，通过 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列，这些属性接受一个由空格分隔的列表，每一个值都是一个长度或者百分比。例如，下面是一个包含两行和三列的网格：
---------- - -------- ----- ------------------- ----- ------ ---------------------- --- --- ---- -
在上面的例子中，网格容器的高度为 300px，第一行高度为 100px，第二行高度为 200px，第一列和第三列宽度相等，是第二列的两倍。
放置元素
一旦定义了网格容器和行列，就可以在网格中放置元素了。使用 grid-row 和 grid-column 属性来指定元素应该出现在哪个行和列。这些属性包含两个部分，第一个部分表示元素出现的起始行或列，第二个部分表示元素出现的结束行或列。例如：
----- - --------- - - -- ------------ - - -- -
在上面的例子中，.item 元素占据了第一行和第二行，第二列和第三列。
网格模板
网格模板是一个简单的方式来定义常见的网格布局，例如等高等宽的网格。可以使用 repeat() 函数定义模板中的重复项。例如，下面是一个包含五列的等宽网格的例子：
---------- - -------- ----- ---------------------- --------- ----- -
网格单位
在 CSS Grid 中，有两个特殊的网格单位：fr 和 minmax()。fr 实现了类似 flexbox 中的 flex-grow 和 flex-shrink 的等比缩放，它的值是一个分数，表示相对比例。minmax() 函数可以定义一个长度范围，例如 minmax(100px, 1fr) 表示元素宽度最小为 100px，最大为可用空间的一份之一。例如：
---------- - -------- ----- ---------------------- --- --- ------------- ----- -
在上面的例子中，第一列和第二列的宽度比例为 1:2，第三列最小为 100px，最大为可用空间的一份之一。
实例演示
以下是一个实例演示，展示了 CSS Grid 的基本用法：
---- ------------------ ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- --------- ----- - ----- - -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------------ ----- ------ ----- - ------ - --------- - - -- ------------ - - -- ----------------- -------- - ------ - --------- - - -- ------------ - - -- ----------------- -------- - ------ - --------- - - -- ------------ - - -- ----------------- -------- - ------ - --------- - - -- ------------ - - -- ----------------- -------- -
在上面的例子中，我们创建了一个网格容器，包含了三行和三列，网格之间有 10px 的间隔。然后我们定义了四个元素放置在网格中的不同位置，每个元素都是一个颜色的卡片，显示了它所在的位置（1，2，3 或 4）。
结论
CSS Grid 是一种强大的 CSS 布局模块，使得网页布局变得更加灵活、精确。本文介绍了 CSS Grid 的概念和基本用法入门教程，帮助您理解如何使用它来创建网页布局。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711b261ad1e889fe200402c