CSS Grid 布局是一种强大的方式，用于创造复杂的网格布局。通过使用CSS Grid 布局，您可以极大地简化您的布局代码，同时创建灵活且响应式的布局。在这篇文章中，我将会展示如何使用CSS Grid布局来制作博客文章的排版。
介绍
在开始介绍CSS Grid布局之前，让我们先快速回顾一下什么是网格布局。网格布局是一种使用网格和项目来管理布局的方式。这些网格是间距相等的纵向和横向线，它们结合起来创造了各种大小的区域，这些区域可以放置项目。这些项目可以横跨多个列和行中，使得你可以创建复杂的布局。
现在让我们开始使用CSS Grid布局为我们的博客文章进行排版。
布局
首先，我们需要为我们的网页创建一个网格。在这个例子中，我们将使用一个包含三行和两列的网格。我们将把文章标题放在第一行之后，内容将会铺满我们的两个列，而左侧将会有一个固定宽度的导航栏。
.container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: minmax(100px, 200px) 1fr; grid-gap: 20px; }
如上所示，我们是如何创建一个具体的网格。.container是我们的容器，我们指定了它应该是一个网格。grid-template-rows定义了我们的三行，每行的高度将会是1fr。grid-template-columns定义了我们的两列，第一列的最小宽度是100px，最大宽度是200px，第二列的宽度将被指定为1fr。grid-gap定义了我们的行和列之间的间距为20px。
现在我们就有了一个网格，我们可以将内容放置在相应的区域内。
内容
我们将使用下面的HTML结构为我们的博客文章创建内容。
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ------------ ------ ---- --------------------- ----------------- ----------------- ----------------- ----------------- ------ ---- --------------- ------- - -------- ------ ------展开代码
如上所述，我们的容器有三个子元素：
- 一个具有类名column-left的子元素，表示我们的导航栏。
- 一个具有类名column-right的子元素，表示我们的博客文章内容。
- 一个具有类名footer的子元素，表示我们的页脚。
我们将使用父容器的显式网格定义来将这些项目放置在相应的网格单元格中。
-- -------------------- ---- ------- ------------ - --------- - - -- ------------ - - -- - -- - --------- - - -- ------------ - - -- - ------------- - --------- - - -- ------------ - - -- - ------- - --------- - - -- ------------ - - -- -展开代码
如上所述，我们已经将每个项目放置在适当的网格单元格中。对于我们的导航栏，我们设置了它应该跨越整个左侧列和所有三个行。对于我们的文章标题，我们将其放置在第二行第一列中。对于我们的博客文章内容，我们将其设置为占据右侧列的整个行，从第二行到第四行。最后，我们将我们的页脚放置在左侧列的第三行上。
自适应
现在，我们快完成了我们的布局。我们来处理一下自适应。我们将使用CSS Media Queries来针对不同的屏幕尺寸对我们的网格进行调整。
我们将创建两个媒体查询。第一个媒体查询表示屏幕宽度小于700px。
-- -------------------- ---- ------- ------ ------ --- ----------- ------ - ---------- - -------- ------ - ------------- -------------- ------- - ------ ----- - -展开代码
如上所示，我们随着屏幕宽度的变窄，将网格容器的显示模式更改为块级。我们还将左侧列，右侧列和页脚设置为100％的宽度，以使其在较小的屏幕上完全充满。
接下来，我们将创建一个表示屏幕宽度小于1000px的媒体查询。这会更改我们的导航栏和内容列的宽度，并将行间距改为10px。
-- -------------------- ---- ------- ------ ------ --- ----------- ------- - ------------ - --------- - - -- ------------ - - -- -------- ----- - ------------- - --------- - - -- ------------ - - -- -------- ----- - ---------- - ---------------------- ---- ------------------- ----- ------------- ----- - -展开代码
如上所述，我们将导航栏和内容列宽度均修改为100％的宽度。我们还将网格模板从两列更改为只有一列，并改为自由高度。
结论
现在，我们已经使用CSS Grid布局成功创建了一个灵活的博客文章排版。我们利用了网格的强大功能，使得我们的布局更加简洁，易于调整和灵活。请利用 CSS Grid布局并根据自己的需求尝试不同的排版。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677120af6d66e0f9aacc0189
