考官：请详细介绍一下 CSS 中的网格布局，学完又能上 80 分了

本文深入探讨了CSS网格布局，包括其基本概念、关键属性如grid-template-columns/rows、grid-gap、grid-template-areas等，以及在实际布局中的应用。通过示例代码展示了如何创建和调整网格布局，帮助读者掌握这一强大的布局工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是高考的第 2 天，恰巧也遇到了一道考题，分享给大家。

感谢提供本期文章的作者：Gaby
链接：https://juejin.cn/post/7106154903701028878
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

什么是网格布局

网格布局（Grid）应该是目前最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局即网格布局，是一个二维的布局方式，与 Flex 不同的是 Flex 是一维布局，而 Grid 由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列，擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

Grid 布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格。适合固定不需要动态改变的布局方式。

设置display:grid/inline-grid的元素就是网格布局容器，这样就能触发浏览器渲染引擎的网格布局算法。

网格布局的属性

属性的基本概念：

容器（container）——有容器属性
项目（items）——有项目属性
行（row)
列（column）
间距（gap) ——单元格之间的距离
区域（area）—— 自己划分每个单元格占据的区域
内容（content)

容器属性：

grid-template-columns: 设置每一列的宽度，可以是具体值，也可以是百分比
grid-template-rows:设置每一行的宽度，可以是具体值，也可以是百分比

常见的设置的值

repeat(): 第一个参数是重复的次数，第二个参数是所要重复的值
auto-fill：有时单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
fr：为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为片段）
minmax(): 函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
auto: 表示由浏览器自己决定长度

.content{
    width: 300px;
    height: 300px;
    margin: auto;
    display: grid;
    /* 中间的宽度由浏览器自己决定 */
    grid-template-columns:  100px auto 100px;
}

grid-column-gap & grid-row-gap。
grid-gap(前两个的缩写）：表示项目相互之间的距离，新版本grid-前缀已经删除。
grid-template-areas：一个区域由单个或多个单元格组成，由自己决定（具体使用，需要在项目属性中设置）区域不需要利用时，则使用“.”表示区域的命名会影响到网络线，会自动命名为区域名-start，终止网格线自动命名为-end

5.grid-auto-flow:划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行（就是子元素的排放顺序）。grid-auto-flow：row:先行后列。

6.justify-items（水平方向）/ align-items（垂直方向）
设置单元格内容的水平和垂直对齐方式。

水平方向上：
justify-items:start|end|center|stretch;
justify-items:start; 起始方向对齐