在网页制作中，布局一直是一个非常重要的问题。在过去，我们使用的布局方式主要有以下几种：
- 使用浮动来实现布局
- 使用定位来实现布局
- 使用Flexbox来实现布局
但是，这些布局方式都有自己的局限性。浮动布局需要考虑清除浮动，定位布局需要计算距离，Flexbox则只能沿着一个方向进行布局。而在 CSS Grid 出现之后，我们可以使用它来实现更加灵活和自适应的网页布局。
什么是 CSS Grid？
CSS Grid 是一种新的布局方式，它可以将网页分割成行和列，然后再将网页内容放置在这些行和列中。它不仅仅是一种网页布局方式，还是一种二维布局方式，可以用来设计复杂的网页布局。
如何使用 CSS Grid？
使用 CSS Grid 需要定义一个网格容器（Grid Container）和一个或多个网格项（Grid Item）。网格容器用来定义行和列，而网格项则用来放置页面内容。
定义网格容器
要定义一个网格容器，可以使用 display: grid 或 display: inline-grid 属性。display: grid 会将整个盒子变成网格容器，而 display: inline-grid 则会将盒子内部变成网格容器。
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr; /* 定义三行 */
grid-template-columns: 1fr 1fr 1fr; /* 定义三列 */
}在网格容器中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义行和列。其中 1fr 表示一个比例单位，例如 grid-template-rows: 1fr 1fr 1fr 表示容器分 3 行，每行高度比例为 1:1:1。
定义网格项
在网格容器中，我们可以通过属性 grid-row 和 grid-column 来定义网格项所在的行和列。
.item {
grid-row: 2 / 4; /* 定义第二行到第四行 */
grid-column: 1 / 3; /* 定义第一列到第三列 */
}在上述示例中，网格项 .item 会占据第二行到第四行和第一列到第三列的区域。
实现自适应宽高的网页布局
使用 CSS Grid 可以很容易地实现自适应宽高的网页布局。具体做法如下：
第一步：定义网格容器
.contain {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}上述示例中，我们定义了一个网格容器 .contain。使用 repeat(auto-fit, minmax(250px, 1fr)) 属性可以让网格自适应容器宽度，并且每个网格最小宽度为 250px。使用 gap 属性可以定义网格之间的间隔。
第二步：定义网格项
.item {
background-color: #333;
color: #fff;
padding: 20px;
border-radius: 5px;
}上述示例中，我们定义了一个网格项 .item，其中包含了一些样式。
第三步：HTML 结构
<div class="contain"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
上述示例中，我们定义了一个包括 5 个网格项的网格容器 contain。
效果预览
在实现自适应宽高的网页布局时，我们可以使用 repeat(auto-fit, minmax(250px, 1fr)) 让网格自适应容器宽度，同时使用 minmax(250px, 1fr) 来限制最小宽度，以保证布局的美观性和舒适性。
总结
CSS Grid 是一种强大的网页布局方式，可以帮助我们实现更加灵活和自适应的网页布局。在实际开发过程中，我们可以结合实际需要灵活运用 CSS Grid，来实现更加美观和实用的网页布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653782077d4982a6eb009290