什么是 CSS Grid?
CSS Grid 是 CSS 中一种强大的布局方式，能够帮助我们轻松创建具有多个栏的复杂布局。它提供了一种可用于将页面分为网格和区域的方式，并允许我们对这些区域进行各种排列和对齐。
CSS Grid 的基础概念
创建 CSS Grid 布局需要以下三个主要的元素：
- 容器元素（Container）：这是包含所有网格项的 HTML 元素。
- 网格项（Grid Items）：这是容器中的所有子组件，它们被定位在不同的网格空间中。
- 网格线（Grid Lines）：这是两个相邻的网格之间的分隔线。
网格线可以是垂直的或水平的，它们可以被指定为具有编号的行数或列数。
CSS Grid 实现多栏布局的原理
实现多栏布局需要使用 CSS Grid 的网格模式。在网格模式下，我们为网格容器指定一个网格模板，该模板定义了列和行的数量以及它们分别占据的宽度和高度。然后，我们可以将不同的 Grid Item 放置在网格中的不同位置。
下面是一个简单的例子，它使用 CSS Grid 来创建一个具有两栏布局的页面：
---------- - -------- ----- ---------------------- --- ---- --------- ----- - ------- - ------------ - - -- - ------- - ------------ - - -- -
在这个例子中，我们首先创建了一个网格容器，使用 display: grid 属性。然后，我们定义了一个网格模板，该模板具有两栏，每栏都有相等的宽度，使用 grid-template-columns 属性。我们还添加了一个 grid-gap 属性，来确定不同的网格元素之间的间隙大小。
接下来，我们在容器中添加了两个 Grid Item，分别命名为 .item-1 和 .item-2。这些元素将放置在网格中的 1/2（第一栏）和 2/3（第二栏）位置，使用 grid-column 属性。
CSS Grid 实现多栏布局的优势
相较于传统的 float、flexbox 这些布局方式，使用 CSS Grid 实现多栏布局的优势在于：
- 灵活性：CSS Grid 的网格模板提供了更大的灵活性，可以更精确地控制每一列和行的大小，并在网格中放置网格项。而对于其它的布局方式则较难做到。
- 可读性：CSS Grid 的语法相比于 float 和 flexbox 等其它布局方式更加清晰明了，代码可读性更高。
- 维护性：CSS Grid 使用方便，更容易维护，也更易于修改。
结论
CSS Grid 是一种强大的布局方式，能够轻松创建多栏布局和各种复杂布局。它提供了灵活性，可读性和易于维护性，是实现复杂布局的最佳选择之一。
示例代码
---- ------------------
---- ---------------
---
------
---- ---------------
---
------
---------------- - -------- ----- ---------------------- --- ---- --------- ----- - ------- - ------------ - - -- - ------- - ------------ - - -- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6713cd3ead1e889fe2105918