CSS Grid 是一种新型的布局方式，它能够使用网格布局来控制网页的布局效果。使用 CSS Grid 可以轻松地实现复杂的布局，同时也可以让网页的代码变得更加简洁易懂。
简单介绍
CSS Grid 将网页布局分成了行和列，这些行和列形成了一个网格。我们可以使用 CSS 属性来控制网格的大小和位置，以此来实现网页的布局。比较常用的属性有：
grid-template-rows：设置网格的行数和行高；grid-template-columns：设置网格的列数和列宽；grid-gap：设置网格之间的间距。
基本使用
下面是一个简单的 CSS Grid 布局示例代码：
<div class="grid-container"> <div class="item-1">Item 1</div> <div class="item-2">Item 2</div> <div class="item-3">Item 3</div> <div class="item-4">Item 4</div> <div class="item-5">Item 5</div> <div class="item-6">Item 6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- ------------------- ---- ----- --------- ----- - --------------- - --- - ----------------- ----- -------- ----- ---------- ----- ----------- ------- -------------- ---- -
这个布局将六个 div 元素包含在一个网格容器中，网格容器使用 display: grid 属性来启用网格布局。然后使用 grid-template-columns 和 grid-template-rows 属性来定义网格的布局。在这个例子中，我们将网格分为了 3 列和 2 行，每个网格的大小是 50px 和 50px。我们使用 grid-gap 属性来设置每个网格之间的间距为 10px。
网格单元格
我们可以使用 grid-row 和 grid-column 属性来控制网格单元格的大小和位置。这两个属性可以使用数字或关键字来设置，例如：
grid-row: 1 / 2：表示将单元格跨越从第一行到第二行；grid-column: 2 / span 2：表示将单元格跨越从第二列开始的两个列。
网格自适应布局
CSS Grid 提供了一个很好的网格自适应布局方案，可以让网页在不同设备上呈现出不同的布局。使用 @media 查询，我们可以定义不同的网格布局。例如：
-- -------------------- ---- -------
--------------- -
-------- -----
------------------- ---- -----
--------- -----
-
------ ---- ------ --- ----------- ------ -
--------------- -
---------------------- --- --- ----
-
-
------ ---- ------ --- ----------- ------ -
--------------- -
---------------------- --- --- --- ----
-
-这个例子中，我们使用 @media 查询来响应不同的屏幕大小。当屏幕宽度大于 600px 时，我们将网格布局分为 3 列；当屏幕宽度大于 900px 时，我们将网格布局分为 4 列。
总结
CSS Grid 是一种非常强大的布局方式，它可以让网页开发人员轻松地实现复杂的布局。使用 CSS Grid 可以让你的代码更加简洁易懂，同时也能够让网页在不同设备上呈现出不同的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ea093ff6b2d6eab3527e3d