随着 HTML 和 CSS 技术的不断发展，CSS Grid 布局成为了前端开发中不可或缺的一项技能。CSS Grid 布局是一种二维布局方式，可以让我们更加灵活地控制页面元素的布局和位置。
在本文中，我们将深入探讨 CSS Grid 布局的实战应用，包括如何使用 CSS Grid 布局创建复杂的页面布局、如何使用命名区域和自适应长度、以及如何处理响应式布局等。
CSS Grid 布局基础
在开始之前，让我们先了解一下 CSS Grid 布局的基础知识。
CSS Grid 布局使用 display: grid 属性来创建一个网格容器，通过 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。
例如，下面是一个简单的 CSS Grid 布局示例：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 150px 150px; }
在这个示例中，我们创建了一个网格容器，其中有三列和两行。每个列的宽度均为 1fr，每行的高度均为 150px。我们可以在这个网格容器中添加元素，并使用 grid-column 和 grid-row 属性指定它们在网格中的位置。
例如，下面是一个使用 CSS Grid 布局创建的简单网格布局：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ - ------- - ------------ - - -- --------- -- - ------- - ------------ - - -- --------- -- - ------- - ------------ -- --------- - - -- -展开代码
在这个示例中，我们创建了三个元素 item-1、item-2 和 item-3，并将它们添加到了网格容器 container 中。然后，我们使用 grid-column 和 grid-row 属性来指定它们在网格中的位置。
创建复杂的页面布局
CSS Grid 布局非常适合用于创建复杂的页面布局，例如多栏布局、媒体对象布局、响应式布局等。
多栏布局
让我们通过一个多栏布局的例子来演示如何使用 CSS Grid 布局创建复杂的页面布局。
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ---- ------------------- ---- --- ----- -------------------- ------- ------- -------- -------- ------- -------- - ------- - ---------- ------- ----------------- ----- - -------- - ---------- -------- ----------------- ----- - -------- - ---------- -------- ----------------- ----- - ------- - ---------- ------- ----------------- ----- -展开代码
在这个示例中，我们创建了 header、sidebar、content 和 footer 四个部分，并使用 grid-template-columns、grid-template-rows 和 grid-template-areas 属性来定义它们的位置和大小。同时，我们将 header、sidebar、content 和 footer 分别赋予了 grid-area 属性来指定它们在网格布局中的区域。
媒体对象布局
媒体对象指的是一种常见的布局方式，将一个图像或视频元素与相关文本元素组合在一起。使用 CSS Grid 布局可以很容易地创建媒体对象布局。
<div class="media-object"> <img src="..." alt="..." class="media-object-image"> <div class="media-object-body"> <p class="media-object-title">Media Object Title</p> <p class="media-object-description">Media Object Description</p> </div> </div>
-- -------------------- ---- ------- ------------- - -------- ----- ---------------------- ----- ---- ---- ----- ------------ ------- - ------------------- - ------------ - - -- --------- - - -- ------ ----- - ------------------- - ------------ ----- ------- -- - ------------------ - ------------ - - -- -展开代码
在这个示例中，我们创建了一个媒体对象，包括图片和相关文本内容。我们使用 display: grid 属性来创建一个网格容器，使用 grid-template-columns 属性和 gap 属性来定义网格的列和行，并将所有元素都添加到了网格容器中。然后，我们使用 grid-column 和 grid-row 属性来指定图像元素 media-object-image 在网格中的位置。
使用命名区域和自适应长度
CSS Grid 布局不仅可以使用数字来定义网格的列和行，还可以使用命名区域来更直观地定义网格容器。同时，CSS Grid 布局还可以自适应长度，根据内容自动调整网格容器的大小。
命名区域
.container { display: grid; grid-template-columns: [column1-start] 1fr [column2-start] 1fr [column3-start] 1fr [column3-end]; grid-template-rows: [row1-start] auto [row3-start] auto [row3-end]; }
在这个示例中，我们使用 [column1-start]、[column2-start]、[column3-start] 和 [column3-end] 定义了四个命名区域，分别代表网格中的四个列。我们同样使用 [row1-start]、[row3-start] 和 [row3-end] 定义了三个命名区域，分别代表网格中的三个行。
然后，我们可以使用这些命名区域来定义网格容器中的元素，例如：
.item-1 { grid-column: column1-start / column2-start; grid-row: row1-start / row3-end; }
在这个示例中，我们使用 grid-column 和 grid-row 属性来将元素 item-1 放到了网格容器的第一列和第一行之间，第一行和第三行之间的区域内。
自适应长度
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 150px; }
在这个示例中，我们使用 repeat(auto-fit, minmax(200px, 1fr)) 属性来定义网格容器的列。这个属性的含义是，将网格容器的列数设置为自适应数量，每个列的最小宽度为 200px，最大宽度为 1fr。
同时，我们使用 grid-auto-rows 属性来定义网格容器的行高。这个属性的含义是，将每行的高度设置为 150px。
处理响应式布局
响应式布局是指使网页在不同设备、不同分辨率下均能合理地呈现，为此我们需要使用到 CSS Grid 布局中的 @media 和 grid-template-areas 属性。其中，@media 可以使所编写的规则只在确定条件成立时才执行；grid-template-areas 属性可以灵活地定义响应式布局的区域。
-- -------------------- ---- ------- ------ ----------- ------ - ---------- - ---------------------- --- --- ---- -------------------- ------- ------ ------- -------- ------- -------- ------- ------ -------- - - ------ ----------- ------ - ---------- - -------- ------ - --------- -------- - ------ ----- - -展开代码
在这个示例中，我们使用 @media (min-width: 768px) 和 @media (max-width: 767px) 分别定义了在不同屏幕大小下网格容器的显示方式。如果屏幕宽度大于等于 768px，则使用 grid-template-columns 和 grid-template-areas 属性来定义网格容器的布局；如果屏幕宽度小于 767px，则使用 display: block 属性将网格容器转换为块级元素，并将元素 content 和 sidebar 的宽度都设为 100%，以适应小屏幕设备。
结语
CSS Grid 布局是一项非常实用的前端开发技能，可以让我们更加灵活地控制页面元素的布局和位置。在本文中，我们深入探讨了 CSS Grid 布局的实战应用，包括如何使用 CSS Grid 布局创建复杂的页面布局、如何使用命名区域和自适应长度、以及如何处理响应式布局等。希望这些知识点可以对你提高前端开发技能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf59400c976d473a3e9988
