在前端开发中，页面布局是不可避免的一个问题，一个好的布局能够提升用户体验、页面响应速度和代码可读性。而现在，CSS Grid 引入进来，打破了过去布局方式的限制，更容易让前端开发者实现各种复杂布局。本文将介绍 6 种基本布局，帮助你更好地理解 CSS Grid 并实现一个令人满意的页面布局。
1. Columns
Columns 布局是构建多列布局的最基本形式，它将内容均分成多列。Columns 布局可以使用 Grid 的 grid-template-columns 属性来实现：
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}上面的代码将 page 内容分为 3 列，每列宽度相等。你可以根据需要来添加或删除这些划分，或者根据视口的大小自适应地改变它们。
2. Rows
Rows 布局同样是基本的一行多列布局，只不过是水平方向的。它的实现方式非常类似于 Columns 布局：
body {
display: grid;
grid-template-rows: 100px auto 100px;
}上面的代码将页面的三行高度分别设为 100px、自适应、100px。这意味着中间的自适应高度会自动填满剩余的空间。
3. Grid
Grid 是一种能够同时进行多行多列布局的方式。这种布局非常灵活，能够让你以多种方式组织内容。下面是一个 Grid 的示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ---- ----- - ----- - ----------------- ----- -------- ----- -
在上面的例子中，我们将 .container 元素的内容划分为 3 列，并设置了 20px 的间隙。.item 元素的样式是与布局无关的，你可以根据具体需要自由设置。
4. Media Object
Media Object 布局是一种非常灵活的列表布局方式，这种布局可以实现图片、视频等媒体元素的展现。下面是一个 Media Object 布局的示例代码：
-- -------------------- ---- ------- ------ - -------- ----- ---------------------- ----- ---- ------------ ------- ---- ----- - ------ --- - ---------- ----- -
上面的示例中，我们将 Media Object 划分为 2 列，并使用了 align-items 属性来让它们垂直居中，同时设置了间隙和图片最大宽度。
5. Holy Grail
Holy Grail 布局是一种经典的页面布局方式，通常用于实现博客和电子商务网站等大型站点。它的核心是将内容划分为一个居中的主列和两个侧边栏，如下所示：
以下是 Holy Grail 布局的代码实现：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- ------------ ------ ---- ------------------- ---- --- ----- ---- ----- - -------- ------- - ------------ - - -- ----------------- ----- ------ ----- -------- ---- -- ----------- ------- - ----- - ------------ -- - ------------- - ------------ -- - -------------- - ------------ -- -
上面的代码将页面划分为上下两个自动高度的区域和一个中间区域，中间区域又分为三列，侧边栏的宽度由 minmax 属性控制，这使得侧边栏能够自适应不同大小的屏幕。
6. Masonry
Masonry 布局是一种在页面上展示多张图片的方式，特点是每张图片的大小不一致。它的实现方式是将图片按照一定的规则进行排列，如下所示：
以下是 Masonry 布局的代码实现：
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- ----------------- ------------- ------ --------------- ------ ---- ----- - -------- --- - ------ ----- ------- ----- ----------- ------ -
上述代码将页面划分为多列，每列的宽度为 1 列等分，其中 minmax 属性限制了每列的最小宽度和最大宽度。grid-auto-rows 属性指定每行的高度为 200px，gap 属性设置了列之间的间隔。图片设置了宽度和高度为 100%，object-fit 属性指定了图片填充方式为 cover。
结语
以上就是 6 种基本的 CSS Grid 布局，希望能够帮助你更好地理解 Grid，并快速实现你的页面布局。每种布局都有其特点，你可以根据实际需求自由组合和调整。如果你想要深入学习 CSS Grid 或者了解更多前端技术，请查看相关的教程和文章。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d7d30ca941bf7134e008b4