1

2

3

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的

元素就不是项目。Grid 布局只对项目生效。

2.2 行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。

2.3 单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

2.4 网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

三、容器属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。

3.1 display 属性

display: grid指定一个容器采用网格布局。

div {

display: grid;

}

上图是display: grid的效果。

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

div {

display: inline-grid;

}

上面代码指定div是一个行内元素，该元素内部采用网格布局。

上图是display: inline-grid的效果。

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

3.2 grid-template-columns 属性，grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

}

上面代码指定了一个三行三列的网格，列宽和行高都是100px。

除了使用绝对单位，也可以使用百分比。

.container {

display: grid;

grid-template-columns: 33.33% 33.33% 33.33%;

grid-template-rows: 33.33% 33.33% 33.33%;

}

（1）repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

.container {

display: grid;

grid-template-columns: repeat(3, 33.33%);

grid-template-rows: repeat(3, 33.33%);

}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

grid-template-columns: repeat(2, 100px 20px 80px);

上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

（2）auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {

display: grid;

grid-template-columns: repeat(auto-fill, 100px);

}

上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

除了auto-fill，还有一个关键字auto-fit，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。

（3）fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {

display: grid;

grid-template-columns: 1fr 1fr;

}

上面代码表示两个相同宽度的列。

fr可以与绝对长度的单位结合使用，这时会非常方便。

.container {

display: grid;

grid-template-columns: 150px 1fr 2fr;

}

上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

（5）auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

（6）网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {

display: grid;

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

（7）布局实例

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。

.wrapper {

display: grid;

grid-template-columns: 70% 30%;

}

上面代码将左边栏设为70%，右边栏设为30%。

传统的十二网格布局，写起来也很容易。

grid-template-columns: repeat(12, 1fr);

3.3 grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {

grid-row-gap: 20px;

grid-column-gap: 20px;

}

上面代码中，grid-row-gap用于设置行间距，grid-column-gap用于设置列间距。

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: ;

因此，上面一段 CSS 代码等同于下面的代码。

.container {

grid-gap: 20px 20px;

}

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

3.4 grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

grid-template-areas: 'a b c'

'd e f'

'g h i';

}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下。

grid-template-areas: 'a a a'

'b b b'

'c c c';

上面代码将9个单元格分成a、b、c三个区域。

下面是一个布局实例。

grid-template-areas: "header header header"

"main main sidebar"

"footer footer footer";

上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a . c'

'd . f'

'g . i';

上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

3.5 grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column;

上面代码设置了column以后，放置顺序就变成了下图。

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

下面的例子让1号项目和2号项目各占据两个单元格，然后在默认的grid-auto-flow: row情况下，会产生下面这样的布局。

上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。

现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

grid-auto-flow: row dense;

上面代码的效果如下。

上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在1号项目的后面。8号项目和9号项目就会排到第四行。

如果将设置改为column dense，表示"先列后行"，并且尽量填满空格。

grid-auto-flow: column dense;

上面代码的效果如下。

上图会先填满第一列，再填满第2列，所以3号项目在第一列，4号项目在第二列。8号项目和9号项目被挤到了第四列。

3.6 justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

}

这两个属性的写法完全相同，都可以取下面这些值。

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）。

.container {

justify-items: start;

}

上面代码表示，单元格的内容左对齐，效果如下图。

.container {

align-items: start;

}

上面代码表示，单元格的内容头部对齐，效果如下图。

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: ;

下面是一个例子。

place-items: start end;

如果省略第二个值，则浏览器认为与第一个值相等。

3.7 justify-content 属性，align-content 属性，place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

}

这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

place-content属性是align-content属性和justify-content属性的合并简写形式。

place-content:

下面是一个例子。

place-content: space-around space-evenly;

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

3.8 grid-auto-columns 属性，grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

.container {

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

grid-auto-rows: 50px;

}

上面代码指定新增的行高统一为50px（原始的行高为100px）。

3.9 grid-template 属性，grid 属性

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。

四、项目属性

下面这些属性定义在项目上面。

4.1 grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

grid-column-start属性：左边框所在的垂直网格线

grid-column-end属性：右边框所在的垂直网格线

grid-row-start属性：上边框所在的水平网格线

grid-row-end属性：下边框所在的水平网格线

.item-1 {

grid-column-start: 2;

grid-column-end: 4;

}

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。读者可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。

下面的例子是指定四个边框位置的效果。

.item-1 {

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 2;

grid-row-end: 4;

}

这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。

.item-1 {

grid-column-start: header-start;

grid-column-end: header-end;

}

上面代码中，左边框和右边框的位置，都指定为网格线的名字。

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

.item-1 {

grid-column-start: span 2;

}

上面代码表示，1号项目的左边框距离右边框跨越2个网格。

这与下面的代码效果完全一样。

.item-1 {

grid-column-end: span 2;

}

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

4.2 grid-column 属性，grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

.item {

grid-column: / ;

grid-row: / ;

}

下面是一个例子。

.item-1 {

grid-column: 1 / 3;

grid-row: 1 / 2;

}

/* 等同于 */

.item-1 {

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 1;

grid-row-end: 2;

}

上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

.item-1 {

background: #b03532;

grid-column: 1 / 3;

grid-row: 1 / 3;

}

/* 等同于 */

.item-1 {

background: #b03532;

grid-column: 1 / span 2;

grid-row: 1 / span 2;

}

上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。

斜杠以及后面的部分可以省略，默认跨越一个网格。

.item-1 {

grid-column: 1;

grid-row: 1;

}

上面代码中，项目item-1占据左上角第一个网格。

4.3 grid-area 属性

grid-area属性指定项目放在哪一个区域。

.item-1 {

grid-area: e;

}

上面代码中，1号项目位于e区域，效果如下图。

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item {

grid-area: / / / ;

}

下面是一个例子。

.item-1 {

grid-area: 1 / 1 / 3 / 3;

}

4.4 justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item {

justify-self: start | end | center | stretch;

align-self: start | end | center | stretch;

}

这两个属性都可以取下面四个值。

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）。

下面是justify-self: start的例子。

.item-1 {

justify-self: start;

}

place-self属性是align-self属性和justify-self属性的合并简写形式。

place-self: ;

下面是一个例子。

place-self: center center;

如果省略第二个值，place-self属性会认为这两个值相等。

五、参考链接

A Complete Guide to Grid, by Chris House

Understanding the CSS Grid Layout Module, by Ian Yates

How to Build an Off-Canvas Navigation With CSS Grid, Ian Yates

Introduction to the CSS Grid Layout With Examples, Dogacan Bilgili

Learn CSS Grid, Jonathan Suh

How I stopped using Bootstrap's layout thanks to CSS Grid, Cédric Kui

（完）

文档信息

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

发表日期： 2019年3月25日

相关文章

2023.08.08: 《TypeScript 教程》发布了

长话短说，我写了一本《TypeScript 教程》，已经发布在网道，欢迎大家访问。

2023.03.21: 运维的未来是平台工程

互联网公司有一个重要工种，叫做"运维"。

2022.10.23: 最简单的 Git 服务器

程序员的代码仓库，总是需要托管一份在服务器，这样才保险，也方便使用。

2022.06.29: 云主机上手教程：轻量应用服务器体验

很多同学都希望架设自己的云服务，这就离不开云主机（cloud server）。

留言（175条）

xulihang

说：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

2019年3月25日 22:44

| #

| 引用

Mirr

说：

终于有教程了XD

2019年3月25日 23:55

| #

| 引用

路过看看

说：

兼容性如何呢？移动端可以用在实际项目中吗？

2019年3月26日 09:02

| #

| 引用

muller_zhang

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

如果只是完成页面样式，用bootstrap（100k左右的css库）的成本是不是有点高

2019年3月26日 09:04

| #

| 引用

周辉

说：

grid 布局在 scrimba 上有免费的教程, 非常不错

2019年3月26日 09:08

| #

| 引用

Neil Ning

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

能这么说，说明你很年轻啊，弟弟。

2019年3月26日 09:25

| #

| 引用

frank

说：

看起來只有 IE、EDGE 不支援

2019年3月26日 11:39

| #

| 引用

any

说：

这属性不是一般的多

2019年3月26日 12:50

| #

| 引用

无骛

说：

昨天上午还搜了一下老师有没有grid相关教程，现在就看到了~很通俗易懂

2019年3月26日 13:20

| #

| 引用

steven

说：

不错，比flex更加强大，二维布局。感谢阮老师 指导

2019年3月26日 13:32

| #

| 引用

绵绵天

说：

除了兼容性问题 grid比flex更好用

2019年3月26日 14:28

| #

| 引用

超龙

说：

赶上了个热乎的了，刚想学一下，就Google到了很棒

2019年3月26日 14:33

| #

| 引用

九歌

说：

阮老师，fr 关键字 第二个示例的图是不是错了

.container {

display: grid;

grid-template-columns: 150px 1fr 2fr;

}

第二个应该和 150px 等宽吧

2019年3月26日 14:45

| #

| 引用

周昆

说：

特别实用，谢谢

2019年3月26日 15:34

| #

| 引用

Ceniy

说：

正好在用 vuetify， 不看flex 布局的话，还真不知道怎么用，感谢!

2019年3月26日 16:25

| #

| 引用

gabe

说：

感觉行间距的属性有点不够用

2019年3月26日 16:37

| #

| 引用

郭二蛋

说：

特别实用，感谢阮老师。

2019年3月27日 09:44

| #

| 引用

叶尘

说：

传统的十二栏布局也很容易吧，大神写的太快了字错了都没注意

2019年3月27日 09:46

| #

| 引用

hjia

说：

可惜IE不支持，这样很难被项目采用啊

2019年3月27日 13:52

| #

| 引用

gabe

说：

问个问题：

.container {

display: grid;

grid-template-columns: repeat(auto-fill, 33.33%);

}

container总宽度不固定，列均分为三，要实现item为正方形，

即高需要随宽变化，如何写？

如果还要加入固定的行间距呢？

2019年3月27日 14:58

| #

| 引用

sio

说：

乘号改成 '×' 好一些，用 'x' 看着容易有歧义

ps: 感谢分享，前几天刚看完MDN文档

2019年3月27日 16:20

| #

| 引用

wm

说：

每天要进来扫一眼有没有更新，666

2019年3月27日 17:50

| #

| 引用

super

说：

非常好的干货，收藏了

2019年3月27日 23:01

| #

| 引用

Can

说：

回归了以前用 table 来创建网页的传统了吗 ????

2019年3月28日 05:28

| #

| 引用

L9m

说：

引用gabe的发言：

问个问题：

.container {

display: grid;

grid-template-columns: repeat(auto-fill, 33.33%);

}

container总宽度不固定，列均分为三，要实现item为正方形，

即高需要随宽变化，如何写？

如果还要加入固定的行间距呢？

你这个的问题其实是想要高宽对应关系，grid 中并没有这种对应关系，你可以试试padding margin， 它们在垂直方向是基于宽度的。

2019年3月28日 20:26

| #

| 引用

Newton

说：

兼容性是大问题呀，比flex兼容性还差，哪里敢用！

2019年3月29日 12:00

| #

| 引用

blossom

说：

@gabe：

这样写

width:33.3%;

padding-bottom: 33.3%

2019年3月29日 12:10

| #

| 引用

菲律宾游学

说：

个人理解：grid对于已知晓内容的元素而言比较方便，但是对于由后台或者其他方式获得的未知数量、尺寸的内容，自适应性不是特别好，最好的方式是结合使用，比如：对于电商商品详情而言，单个商品的基本内容（模板）布局可以使用grid布局，但是对于整个列表，使用flex布局会更好一些。

2019年3月29日 13:30

| #

| 引用

galenjiang

说：

之前看了flex的教程，整理的很棒。这次又更新了grid，谢谢分享

2019年4月 1日 10:04

| #

| 引用

Logic

说：

适用于整体页面布局，

需求改动的时候也能快速作出变更。

得先考虑好分成几行几列，就跟以前用table一样

2019年4月 1日 11:16

| #

| 引用

Thinker

说：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

2019年4月 1日 16:37

| #

| 引用

kevinliang

说：

引用Thinker的发言：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

如果你是mac电脑的话，command + ↑ 一下就回去了。 windows的话自己研究

2019年4月 1日 19:38

| #

| 引用

abc

说：

引用gabe的发言：

问个问题：

.container {

display: grid;

grid-template-columns: repeat(auto-fill, 33.33%);

}

container总宽度不固定，列均分为三，要实现item为正方形，

即高需要随宽变化，如何写？

如果还要加入固定的行间距呢？

.container {

display: grid;

grid-template-columns: repeat(3,calc(100wh / 3));

grid-template-rows:calc(100wh / 3);

}

2019年4月 1日 21:00

| #

| 引用

lcc

说：

引用Thinker的发言：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

试试键盘上的 【home】 键

2019年4月 2日 11:17

| #

| 引用

Pigpiyo

说：

引用Thinker的发言：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

喜欢用鼠标的话可以装个插件，自定义鼠标右键手势，例如 按下右键 往下滑动再往上滑动 就会飞回顶部，还有前进后退切换标签页等功能

2019年4月 2日 20:45

| #

| 引用

ykkkkk

说：

引用kevinliang的发言：

如果你是mac电脑的话，command + ↑ 一下就回去了。 windows的话自己研究

windows 电脑 Home键不就可以直接返回顶部吗？

2019年4月 3日 11:39

| #

| 引用

水流山

说：

感谢分享，每周必看的哈

2019年4月 3日 16:51

| #

| 引用

x2r

说：

Grid 的花样可真多啊，感觉又强大又复杂

2019年4月 5日 18:53

| #

| 引用

但是

说：

阮老师，你好。你上面说：注意，设为网格布局以后，容器的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。我试了一下啊，float设置并没有失效啊

2019年4月 8日 11:17

| #

| 引用

阮一峰

说：

@但是：谢谢指出，这里应该是容器的子元素（项目），我已经改过来了。

2019年4月 8日 12:23

| #

| 引用

mo

说：

引用ykkkkk的发言：

windows 电脑 Home键不就可以直接返回顶部吗？

正解，按home键一键回顶部！

2019年4月15日 15:01

| #

| 引用

屮鱼

说：

千呼万唤始出来～感谢大佬

2019年4月26日 13:13

| #

| 引用

k2

说：

grid布局bug有点多，如果子容器全是英文或者数字，如aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，那超出父容器的宽度将会溢出，阮老师可以试试，有没有什么解决方法呢？

2019年5月 3日 00:56

| #

| 引用

王佳培

说：

@九歌：

150px 1fr 2fr, 应该代表的是第一列 150px 宽, 第二列和第三列以 1:2 的宽度比平分剩余的宽度.

2019年5月 4日 01:28

| #

| 引用

Nicolas

说：

阮老师的这篇 CSS Grid 文章，是我看过最通俗易懂的！赞～

2019年5月 6日 14:07

| #

| 引用

gemini

说：

引用Can的发言：

回归了以前用 table 来创建网页的传统了吗????

被你一语道破天机

2019年5月 6日 15:26

| #

| 引用

Mubin

说：

@k2：

overflow:hidden ?不行

2019年5月 7日 18:25

| #

| 引用

程好好

说：

@九歌：

不是的，fr只是平分100vw-150px剩下的宽度

2019年5月13日 11:03

| #

| 引用

会飞

说：

循序渐进，写的真好，喜欢看老师的文章

2019年5月15日 22:42

| #

| 引用

Va007

说：

兼容性怎么样呢？而且感觉目前项目中大部分需求用不到grid布局，用这个感觉有些大材小用了（写起来麻烦）

2019年5月22日 17:47

| #

| 引用

avocado

说：

引用Va007的发言：

兼容性怎么样呢？而且感觉目前项目中大部分需求用不到grid布局，用这个感觉有些大材小用了（写起来麻烦）

不是用不到，是你习惯了不用 grid，我现在公司的项目大量使用 grid 和 flex

2019年5月29日 22:04

| #

| 引用

Klart

说：

flex布局和grid布局可以一起使用么！

2019年6月 3日 20:35

| #

| 引用

h

说：

个人觉得单轴布局更灵活吧，这种网格的需求不是特别大，而且用起来好繁琐了。

2019年6月 7日 12:05

| #

| 引用

超超的banana

说：

非常非常感谢您的分享，很受益，明天可以用得到。

2019年6月13日 00:01

| #

| 引用

umc

说：

引用frank的发言：

看起來只有 IE、EDGE 不支援

ie11以上支持，这个就是面对未来的新浏览器

2019年6月14日 11:58

| #

| 引用

来碗粥

说：

所以这是新出来的布局方式 未来浏览器的走势？

2019年6月25日 14:13

| #

| 引用

痴人的梦

说：

flex布局刚弄明白。。。这又来一个

简单的阅读了一遍得出结论：不考虑兼容flex面临淘汰(用flex意味着不考虑兼容吧？

如果三维布局出来。。。是不是grid也面临淘汰

我真的不想学css了。。。。真的。。。。

2019年7月 7日 00:57

| #

| 引用

fizzy

说：

@abc：

是 vw，使用这个单位可以做到响应式的正方形

2019年7月15日 12:02

| #

| 引用

elaine

说：

@九歌：

你可以自己尝试下，我照着demo尝试了，第三个确实是第二个的2倍

2019年7月17日 17:38

| #

| 引用

江训良

说：

ReactNative中也不支持

2019年7月17日 22:26

| #

| 引用

雷锋

说：

引用Thinker的发言：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

按住鼠标滚轮往上拖就好了

2019年7月18日 15:39

| #

| 引用

BlurryFace9

说：

在学网格的时候看烦了，随手谷歌了下搜到老师的文章，一字不差地看完了，收益匪浅，谢谢老师。

2019年7月22日 23:32

| #

| 引用

潘提保

说：

非常棒，就是兼容性还不行。

2019年7月24日 15:45

| #

| 引用

奥马巴

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

弟弟这根本就不是一个层面上的东西

2019年8月 5日 16:08

| #

| 引用

小王子

说：

第一次看阮一峰老师的文章还是flex布局，一路走到全栈，刚看完Grid收获挺大的。不过阮老师，有一个小建议，就是代码对webApp或者各种浏览器内核等的兼容性问题，您有时间可以补充提示一下的。感恩~~

2019年8月 9日 17:59

| #

| 引用

秋名山

说：

引用kevinliang的发言：

如果你是mac电脑的话，command + ↑ 一下就回去了。 windows的话自己研究

ctrl+ home

ctrl + end

2019年8月11日 22:12

| #

| 引用

twoyoung

说：

很强大的布局方式；写的通俗易懂了。

2019年8月14日 18:02

| #

| 引用

燃叶

说：

希望老师补充一下动画这块

https://css-tricks.com/snippets/css/complete-guide-grid/

2019年8月28日 12:19

| #

| 引用

神奇的呆子

说：

请问一下“auto-fit”这个属性是不是没有介绍到

2019年9月 6日 20:26

| #

| 引用

不爱梨

说：

太棒了 今天才知道这个属性，flex就是看的阮老师的教程学习的，接下来要学习这个了

2019年9月10日 23:56

| #

| 引用

react

说：

这个布局,大家不觉得做大屏数据可视化的时候,是非常有用的吗?

2019年9月24日 15:15

| #

| 引用

Roczhang

说：

阮老师的文章一如既往地让人毛塞顿开，大赞！！！

2019年9月30日 09:10

| #

| 引用

糖少

说：

引用九歌的发言：

阮老师，fr 关键字 第二个示例的图是不是错了

.container {

display: grid;

grid-template-columns: 150px 1fr 2fr;

}

第二个应该和 150px 等宽吧

三个参数是三列的意思 宽度减去150px三等分

2019年10月 2日 18:17

| #

| 引用

德玛西亚

说：

请教：为什么设置了justify-items:start 或 justify-self: start后，项目的背景颜色只有和字一样大小了。而不是之前的背景铺满单元格？

2019年10月16日 16:13

| #

| 引用

吃货

说：

引用ykkkkk的发言：

windows 电脑 Home键不就可以直接返回顶部吗？

阿西吧 我试了一下 果然有重新往下拉了一遍

2019年10月18日 14:46

| #

| 引用

Draven

说：

引用九歌的发言：

阮老师，fr 关键字 第二个示例的图是不是错了

.container {

display: grid;

grid-template-columns: 150px 1fr 2fr;

}

第二个应该和 150px 等宽吧

我也这么感觉的，去老师给的演示网站试了下，第二个与150px等宽

2019年10月22日 09:36

| #

| 引用

1

说：

引用Newton的发言：

兼容性是大问题呀，比flex兼容性还差，哪里敢用！

ie 不兼容,edge, safai,火狐都还好

2019年10月28日 17:52

| #

| 引用

幸永旭

说：

我grid子元素中，添加了一个div，结果子元素就被撑开了，这个怎么解决呢？？

2019年11月 1日 13:37

| #

| 引用

xiao6

说：

但是如果每个grid网格项里面放了img，又照设计稿设置了固定宽高，又要做出那种最开始那张图不规则的九宫格布局，列宽、行宽、网格项数量又要重新计算，感觉还不如绝对定位那种传统的实现方式实现好。

2019年11月19日 14:10

| #

| 引用

LeonCui

说：

04 年阿捷翻译了 《网站重构》 这本书，div布局从此替代了table布局，现在时隔15年，又回去了吗，看介绍，简单的布局远不如float简单，方便，复杂的布局和组件布局，也不够灵活，那个说bootstrap 100k的，你知道单单核心栅栏布局有几行代码吗？自己写过css框架吗？知道bootstrap的代码有几行是写组件的吗？最简单地写，一个12栏网格浮动布局，只要4行（类名除外，一行一句属性），就够了

2019年11月20日 16:43

| #

| 引用

dly

说：

感谢阮老师，又学到新的知识了。不过我看到您上面关于:

.container {

display: grid;

grid-template-columns: repeat(auto-fill, 100px);

}

这里的 auto-fill，然后我点进代码里面看发现代码里面写的是 auto-fit哦，然后我两个属性都试了一遍，发现都可以自动换行。想请教一下阮老师是以哪个为准呢

2019年12月 5日 09:56

| #

| 引用

马叶云

说：

我水土不服就服我的阮一峰哥哥，能不能留下你的QQ或者微信！我特别崇拜你！

2019年12月12日 16:33

| #

| 引用

Louis

说：

引用Neil Ning的发言：

能这么说，说明你很年轻啊，弟弟。

未必吧，bootstrap的grid是一个已经集成好的方案，用起来确实比自己用grid写方便。 如果有一天bootstrap的grid也用css grid来实现了，你还会说这句话么。

2019年12月17日 10:32

| #

| 引用

Louis

说：

引用xiao6的发言：

但是如果每个grid网格项里面放了img，又照设计稿设置了固定宽高，又要做出那种最开始那张图不规则的九宫格布局，列宽、行宽、网格项数量又要重新计算，感觉还不如绝对定位那种传统的实现方式实现好。

具体情况具体分析，这就是个工具。没必要比较flex float 和 grid哪个好。 哪个适合你的应用场景哪个就是好的。

2019年12月17日 10:36

| #

| 引用

前端蔡徐坤

说：

边做笔记，边自己想着打了出来。感觉超级无敌方便，很强。

要是兼容性也处理的很好的话，真是解放了

2020年1月 5日 10:05

| #

| 引用

冰儿

说：

请教一下老师，grid-column: 1 / 3 在scss中运用时候被计算了，这该怎么处理啊

2020年1月 5日 21:41

| #

| 引用

路漫漫

说：

引用九歌的发言：

阮老师，fr 关键字 第二个示例的图是不是错了

.container {

display: grid;

grid-template-columns: 150px 1fr 2fr;

}

第二个应该和 150px 等宽吧

此处的fr是对剩余宽度的比例分配

2020年1月14日 15:41

| #

| 引用

第二钢协

说：

引用hjia的发言：

可惜IE不支持，这样很难被项目采用啊

这都啥年代了还兼容IE呢。。。IE早该被弃了，一般程序现在都不用兼容IE，比如有道云笔记。难道你在政府企业搞开发？

2020年2月26日 11:06

| #

| 引用

学神之女

说：

引用路过看看的发言：

兼容性如何呢？移动端可以用在实际项目中吗？

刚刚有查caniuse，IE11都有部分支持，所以……可以放心用。

2020年3月 7日 19:33

| #

| 引用

狼仔

说：

引用第二钢协的发言：

这都啥年代了还兼容IE呢。。。IE早该被弃了，一般程序现在都不用兼容IE，比如有道云笔记。难道你在政府企业搞开发？

政府企业为何首选IE啊，，喜欢她的开源还是喜欢她的漏洞

2020年3月 8日 17:51

| #

| 引用

武汉加油

说：

引用any的发言：

这属性不是一般的多

边看边打代码做笔记做个两个小时！！太多了，到时候用起来还得好好掂量掂量

2020年3月10日 01:38

| #

| 引用

杠精

说：

感觉回到了表格布局年代...

2020年3月16日 16:48

| #

| 引用

yqwoshuai

说：

引用第二钢协的发言：

这都啥年代了还兼容IE呢。。。IE早该被弃了，一般程序现在都不用兼容IE，比如有道云笔记。难道你在政府企业搞开发？

没办法，政府部门全部都是IE

2020年3月28日 12:11

| #

| 引用

醉生梦死

说：

IE不兼容，蓝廋香菇。

2020年4月 3日 11:26

| #

| 引用

pippo

说：

请教阮大神及各位老师，如何实现 grid 分格，然后拖拽调整分格的尺寸？

2020年4月10日 10:40

| #

| 引用

peter

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

总想着用框架，不加深基本功。。。

框架那么多，出一个学一个，然后又觉得迷茫了，东西太多了，我也无话可说了

2020年4月29日 13:53

| #

| 引用

gaoweb

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

你这个说法就问题大了，CSS跟Bootstrap就不是等价的好吧，&无语

2020年5月13日 18:12

| #

| 引用

zxy

说：

引用Roczhang的发言：

阮老师的文章一如既往地让人毛塞顿开，大赞！！！

茅塞顿开

2020年5月15日 16:41

| #

| 引用

wzw

说：

引用狼仔的发言：

政府企业为何首选IE啊，，喜欢她的开源还是喜欢她的漏洞

ZF的系统都是定制版的, IE是自带的, 不能随便装软件的

2020年5月19日 16:42

| #

| 引用

骑毛驴赶巴黎

说：

@gabe：

项目不设置高度，padding-top或者padding-bottom的值为100%，就可实现永远正方形

2020年6月24日 10:47

| #

| 引用

北风萧萧雪花飘飘

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

假如我某一个页面只需要简单的grid布局，我值当引入Bootstrap吗?"Bootstrap只要处理HTML就行了"那是因为库帮你处理了css。

2020年7月 1日 09:19

| #

| 引用

庞诗琪

说：

新手表示，很全面，爱了爱了。

2020年7月29日 15:16

| #

| 引用

BIgFatStar

说：

引用Thinker的发言：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

HOME键不就回到顶部了吗

2020年8月 5日 14:08

| #

| 引用

ww

说：

有快速让grid布局下盒子里的内容水平垂直居中的方法吗

2020年8月13日 13:48

| #

| 引用

Jam.Zhu

说：

挺好用的，就是属性太多了。兼容也有待考量。

2020年8月18日 18:06

| #

| 引用

Bad Luke

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

grid是css，bootstrap是一个库，这有啥好比的？

2020年8月26日 13:34

| #

| 引用

三剑客

说：

引用冰儿的发言：

请教一下老师，grid-column: 1 / 3 在scss中运用时候被计算了，这该怎么处理啊

你说的是缩写，你可以试着不缩写

2020年9月 7日 17:24

| #

| 引用

98年老阿姨

说：

新手小白学习了...感谢老师！不过博客这么长，真的不打算在旁边加一个导航目录的功能跳转功能吗？>_

2020年9月 9日 15:27

| #

| 引用

Liusyuan

说：

引用98年老阿姨的发言：

新手小白学习了...感谢老师！不过博客这么长，真的不打算在旁边加一个导航目录的功能跳转功能吗？>_

阮老师的文章一定要从头看到尾亚

2020年9月10日 10:16

| #

| 引用

李无敌

说：

引用mo的发言：

正解，按home键一键回顶部！

非常感谢，我看到一半直接飞上去了！

2020年10月 9日 11:21

| #

| 引用

sy

说：

引用k2的发言：

grid布局bug有点多，如果子容器全是英文或者数字，如 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ，那超出父容器的宽度将会溢出，阮老师可以试试，有没有什么解决方法呢？

试下word-break:break-all？ 这个貌似跟grid没啥关系吧？？？

2020年10月28日 11:19

| #

| 引用

东方易

说：

这种布局怎样嵌套？？

比如：做一个上下固定中间自适应的布局。中间自适应的部分再布局成上下固定中间自适应的。

2020年11月 6日 16:36

| #

| 引用

richard

说：

@gabe：

gird-template-columus: repeat(3, 100vw/3);

子项：height: 100vw/3

2020年11月19日 11:41

| #

| 引用

richard

说：

引用东方易的发言：

这种布局怎样嵌套？？

比如：做一个上下固定中间自适应的布局。中间自适应的部分再布局成上下固定中间自适应的。

grid-template-rows: 100px auto 100px;

2020年11月19日 11:59

| #

| 引用

艾欧尼亚

说：

引用德玛西亚的发言：

请教：为什么设置了justify-items:start 或 justify-self: start后，项目的背景颜色只有和字一样大小了。而不是之前的背景铺满单元格？

同问，我也有这个疑问，align-items就没有这个问题呢。

2020年11月21日 21:04

| #

| 引用

mirror

说：

好文,看了多次了,写的简单明了而又详尽却不繁琐.

2020年12月17日 18:22

| #

| 引用

Ameng404

说：

引用muller_zhang的发言：

如果只是完成页面样式，用bootstrap（100k左右的css库）的成本是不是有点高

更大的项目都用了bootstrap，小项目用那就更应该了呀，你这种逻辑是不对的

2020年12月18日 18:35

| #

| 引用

朱

说：

比flex更强大,以后布局会会更快也更好

2020年12月21日 12:02

| #

| 引用

yk

说：

引用菲律宾游学的发言：

个人理解：grid对于已知晓内容的元素而言比较方便，但是对于由后台或者其他方式获得的未知数量、尺寸的内容，自适应性不是特别好，最好的方式是结合使用，比如：对于电商商品详情而言，单个商品的基本内容（模板）布局可以使用grid布局，但是对于整个列表，使用flex布局会更好一些。

认同，对于固定布局的一些页面，使用grid可能更快一些。但是对于动态查询上来数据再布局，grid的自适应能力就差很多了，人工去算每一个元素的宽度高度，然后套入grid布局，工作量巨大。

2020年12月22日 15:48

| #

| 引用

boide.gui

说：

个人使用这个开发移动端瀑布流图册，问题是对某些手机会出现混乱，我开发的时候使用的是华为手机开发的，测试的时候，华为，苹果，小米手机展示正常，open，vivo部分手机展示的效果出现了混乱。其他机型未测试。

2020年12月24日 14:56

| #

| 引用

BodomLake

说：

引用Thinker的发言：

一直觉得阮老师的文章可看性非常高！美中不足的是竟然没有回到顶部的功能，特别是这篇文章比较长，想重新回去看还得点刷新

执行 document.documentElement.scrollTop = 0;

2020年12月30日 16:51

| #

| 引用

利

说：

棚格布局可以用于PC吗，不知道能不能兼容到IE9

2021年1月13日 20:24

| #

| 引用

林先生

说：

引用周辉的发言：

grid 布局在 scrimba 上有免费的教程, 非常不错

谢谢提醒，刚刚看了两集，感觉还不错。就是每次进去退出都会提醒你充钱 -_-...

2021年1月14日 16:56

| #

| 引用

away

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

你这比较的两个东西都不是一个层面。。

2021年1月15日 11:06

| #

| 引用

络石

说：

grid-gap 属性受到内部item元素padding值影响

2021年1月16日 18:41

| #

| 引用

isurplus

说：

加一个标题导航多好

2021年1月22日 10:33

| #

| 引用

阿甘骑士

说：

从头读到尾，包括flex布局的文章，对这两种布局差不多算是熟悉了，感谢作者！

2021年1月29日 15:10

| #

| 引用

袁德圣

说：

@九歌：

应该不是的,按照写法应该有3列,其中第一列占用了150px 剩下两列 参数1fr+2fr 应该是3份 第一列占用1/3 第二列占用2/3 不知道是不是这样理解的

2021年3月16日 00:26

| #

| 引用

百良西瓜

说：

3.2 (3) 最后一个图，第1行的宽度貌似不对，( ╯□╰ )

2021年3月16日 10:25

| #

| 引用

百良西瓜

说：

留言最好能能按倒序排下，习惯 (￣▽￣)"

2021年3月16日 10:28

| #

| 引用

why

说：

看完了，初学grid，谢谢博主

2021年4月 5日 21:21

| #

| 引用

Mess

说：

引用muller_zhang的发言：

如果只是完成页面样式，用bootstrap（100k左右的css库）的成本是不是有点高

用 bootstrap 仅仅是方便维护而已。

2021年4月27日 15:31

| #

| 引用

毛绒绒的大腿

说：

都看完，有没有人能把概述中说的 Grid 布局的拿手好戏的图用grid方式写出来的

2021年4月27日 23:18

| #

| 引用

ThomasLiew

说：

这个用来写瀑布流就不用计算高度平流对齐了,一行搞定

2021年4月29日 14:32

| #

| 引用

大西瓜

说：

自从用了grid，连margin和padding都不想用了，而且chrome调试时还有辅助线，真香！

2021年5月13日 13:50

| #

| 引用

chuan

说：

感谢作者。

概述图我的实现：https://codepen.io/huqifj/pen/GRWPWPL

2021年6月15日 16:32

| #

| 引用

cong99

说：

看了老师的这篇文章，前后不到15分钟，觉得这15分钟感觉就像一块钱买了一件羽绒服一样，物超所值啊，真正的“老师”，言简意赅，图文并茂，深入浅出，真乃“传道受业解惑也”！

2021年7月18日 13:19

| #

| 引用

小峰酱

说：

引用k2的发言：

grid布局bug有点多，如果子容器全是英文或者数字，如aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，那超出父容器的宽度将会溢出，阮老师可以试试，有没有什么解决方法呢？

字母都是这样的，其他的很多容器都会超出，用汉字就不会有这个问题

2021年7月22日 14:18

| #

| 引用

军军

说：

引用小峰酱的发言：

字母都是这样的，其他的很多容器都会超出，用汉字就不会有这个问题

可以使用：word-break:break-all

2021年8月 6日 19:06

| #

| 引用

小辣鸡

说：

引用hjia的发言：

可惜IE不支持，这样很难被项目采用啊

IE要被停啦！

2021年8月12日 10:55

| #

| 引用

Mr wo

说：

想要显示网格线应该怎么操作啊，文档里也没看到

2021年8月13日 14:58

| #

| 引用

Andy

说：

引用Mr wo的发言：

想要显示网格线应该怎么操作啊，文档里也没看到

子元素的border~

2021年8月14日 17:18

| #

| 引用

女友用时方恨少

说：

grid画骰子比flex香很多

2021年8月23日 10:24

| #

| 引用

不务正业的洋小姐

说：

想问一下 justify-items 和 justify-self 的区别

2021年8月26日 17:27

| #

| 引用

cys

说：

引用不务正业的洋小姐的发言：

想问一下 justify-items 和 justify-self 的区别

justify-items是容器的属性，设置所有项目整体的水平分布； justify-self是项目的属性，只能设置某个项目的水平分布

2021年9月 1日 16:27

| #

| 引用

oldking

说：

那么问题来了，文章开头的布局如何写出来

2021年9月17日 09:54

| #

| 引用

何小疯

说：

引用cys的发言：

justify-items是容器的属性，设置所有项目整体的水平分布； justify-self是项目的属性，只能设置某个项目的水平分布

我试了试，它们的局别应该不大，局别在于justify-items属性是对所有项目在水平方向上如何分布进行设置；而justify-self就像flex布局里的align-self一样单独设置项目在某一方向上如何分布（排列）。

2021年10月16日 23:04

| #

| 引用

吴玥

说：

引用九歌的发言：

阮老师，fr 关键字 第二个示例的图是不是错了

.container {

display: grid;

grid-template-columns: 150px 1fr 2fr;

}

第二个应该和 150px 等宽吧

1fr和2fr是相对于剩余大小而言的，相当于把剩余大小分为3等份，而不是基于150px

2021年10月26日 11:38

| #

| 引用

ljj/

说：

搞不懂为什么删我评论 我又没违法违规 几行css代码就给我删了 还讨论个鸭儿

2021年11月 2日 09:25

| #

| 引用

taylor

说：

引用德玛西亚的发言：

请教：为什么设置了justify-items:start 或 justify-self: start后，项目的背景颜色只有和字一样大小了。而不是之前的背景铺满单元格？

估计是默认stretch吧

2021年11月 8日 16:43

| #

| 引用

shi

说：

您好，我想用grid实现瀑布流照片墙布局；但发现网格行高不能自适应图片高度，只能铺满或者通过grid-row设置。请问可以通过grid实现高度自适应的瀑布流布局吗？

2021年11月 9日 18:46

| #

| 引用

西亭-七月

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

有些复杂的表格形式的东西,bootstrap 搞不定的

2021年11月17日 15:36

| #

| 引用

tianakack

说：

@九歌：

不是,grid-template-columns: 150px 1fr 2fr;表示减去150px之后,剩余部分分三份,一边一份,一边两份

2021年11月25日 15:12

| #

| 引用

tianakack

说：

引用pippo的发言：

请教阮大神及各位老师，如何实现 grid 分格，然后拖拽调整分格的尺寸？

这也是我想要问的,没找到这方面的资料

2021年11月25日 15:23

| #

| 引用

dying

说：

@gabe：

这个很简单啊 只需要加一行代码即可 grid-auto-rows: 33.33vw;固定的行间距就用grid-gap属性就可以了

2021年12月16日 15:50

| #

| 引用

山月明

说：

在chrome浏览器中，当设置网格的gap过大的时候，会导致项目溢出容器边界。如果设置了overflow为hidden则项目中的内容就被裁剪了。当gap设置小一些的时候不会出现这个情况。大家有知道原理的吗？如何保证gap设置大值的时候项目只是缩小那？

2022年1月18日 11:12

| #

| 引用

ccc

说：

引用幸永旭的发言：

我grid子元素中，添加了一个div，结果子元素就被撑开了，这个怎么解决呢？？

将

grid-auto-columns

grid-auto-rows

换成

grid-template-columns

grid-template-rows

gird子元素就不会被撑开

2022年1月20日 10:09

| #

| 引用

ccc

说：

@幸永旭：

grid子元素会被默认设置min-width: auto; min-height: auto属性。

设置grid子元素min-width: 0; min-height: 0，就不会被撑开

2022年1月20日 15:25

| #

| 引用

ssbunny

说：

fr 不叫关键字，叫单位。关键字是指 min-content、 auto 这些

2022年1月27日 14:44

| #

| 引用

MadLife

说：

引用pippo的发言：

请教阮大神及各位老师，如何实现 grid 分格，然后拖拽调整分格的尺寸？

结合splitpanes这个插件就可以吧

2022年3月15日 11:51

| #

| 引用

zyweb

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

如果你项目不用bootstrap呢，那就不会写了？

2022年3月28日 16:24

| #

| 引用

666

说：

阮老师 你写错了

按你 2.2 的图示和解释

2行2列 生成了 9 个 单元格！

2022年3月29日 10:59

| #

| 引用

的

说：

引用xulihang的发言：

感觉Grid的一个缺点就是要写CSS，而用Bootstrap只要处理HTML就行了，这样的一个好处是用程序动态生成HTML就可以完成布局而不用考虑CSS。

你自己弄个grid的css文件，引入项目直接用class不一样的么，本质都不知道只会拿来主义不行的

2022年7月28日 18:49

| #

| 引用

JQ

说：

希望阮老师补充下：auto-fit 这个属性

2022年8月11日 11:43

| #

| 引用

茶茶

说：

auto-fill 的情况下，容器实际可填充数量大于子元素数量，设置居中会失效...

2022年10月29日 15:47

| #

| 引用

jc

说：

该更新了

2023年2月 1日 16:35

| #

| 引用

momey

说：

现在it就业怎么样啊，24届毕业生有点迷茫。

2023年3月16日 10:17

| #

| 引用

暻

说：

引用momey的发言：

现在it就业怎么样啊，24届毕业生有点迷茫。

还有一年迷茫这么早

2023年3月28日 14:32

| #

| 引用

boxsnake

说：

grid-column-gap 和 grid-row-gap 已改为 column-gap 和 row-gap，与 flex 共用这两个属性。

2023年5月 6日 16:17

| #

| 引用

boxsnake

说：

引用Can的发言：

回归了以前用 table 来创建网页的传统了吗????

还是有区别的，相比与table需要把行列放到对应的地方的布局方式，grid的布局只需要通过CSS进行调整每一块的位置，比table灵活不少

2023年5月 6日 16:33

| #

| 引用

大海

说：

为什么阮一峰老师的博客，只能谷歌精确搜索到，百度搜出来的全是挂羊头卖狗肉的

2023年5月17日 15:47

| #

| 引用

yxc

说：

我想知道最开始概述里面的那个布局， grid 怎么写

2023年7月 1日 09:50

| #

| 引用

cl

说：

grid布局，怎么实现只显示一行，一行三列，超出隐藏

2023年9月 4日 10:52

| #

| 引用

Eren

说：

还是你写得好呀

2023年9月 5日 14:15

| #

| 引用

westgrass

说：

auto-fill和auto-fit的区别说得不够到位：

在单元格固定宽度的情况下，如果一行能够容纳的格子数大于实际内容格子数，auto-fill会继续创建空的单元格直到这一行容不下为止，auto-fit则只会创建和内容格子数一致的格子。

举个例子：

一个ul为grid容器,内有3个li为grid项目。如下代码：

ul{

width: 900px;

display: grid;

justify-content:center;

grid-template-columns: repeat(auto-fill, 200px);

}

会创建出四列单元格，实际grid区有效宽度是800px，左右各50px空白。由于实际上只有3个grid项目，视觉上内容就偏在左边。

而如果使用 grid-template-columns: repeat(auto-fit, 200px)，就只会创建3列，实际grid区有效宽度600px，左右各150px空白，视觉上就正确居中了。

2023年10月 3日 01:03

| #

| 引用

我要发表看法

您的留言

（HTML标签部分可用）

您的大名：

«-必填

电子邮件：

«-必填，不公开

个人网址：

«-我信任你，不会填写广告链接

记住个人信息？

正在发表您的评论，请稍候

«- 点击按钮

Weibo |

Twitter |

GitHub

Email: [email protected]

最强大的 CSS 布局 —— Grid 布局 - 掘金

最强大的 CSS 布局 —— Grid 布局 - 掘金

首页 首页

沸点

课程

直播

活动

竞赛

商城

APP

插件 搜索历史

清空

创作者中心

写文章 发沸点 写笔记 写代码 草稿箱 创作灵感

查看更多

会员

登录

注册

最强大的 CSS 布局 —— Grid 布局

Gopal

2020-07-27

147,057

阅读17分钟

Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址

Grid 布局和 flex 布局

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！

flex布局示例:

Grid 布局示例：

Grid 的一些基础概念

我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址

.wrapper {

margin: 60px;

/* 声明一个容器 */

display: grid;

/* 声明列的宽度 */

grid-template-columns: repeat(3, 200px);

/* 声明行间距和列间距 */

grid-gap: 20px;

/* 声明行的高度 */

grid-template-rows: 100px 200px;

}

.one {

background: #19CAAD;

}

.two {

background: #8CC7B5;

}

.three {

background: #D1BA74;

}

.four {

background: #BEE7E9;

}

.five {

background: #E6CEAC;

}

.six {

background: #ECAD9E;

}

.item {

text-align: center;

font-size: 200%;

color: #fff;

}

容器和项目：我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。比如上面 .wrapper 所在的元素为一个网格容器，其直系子元素将成为网格项目。

网格轨道：grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。上图中 One、Two、Three 组成了一行，One、Four 则是一列

网格单元：一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。上图中 One、Two、Three、Four...都是一个个的网格单元

网格线：划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序

容器属性介绍

Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆

Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性

display 属性

display 属性演示

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素

.wrapper {

display: grid;

}

.wrapper-1 {

display: inline-grid;

}

grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns 和 grid-template-rows 属性演示地址

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，这两个属性在 Grid 布局中尤为重要，它们的值是有多种多样的，而且它们的设置是比较相似的，下面针对 grid-template-columns 属性进行讲解

固定的列宽和行高

.wrapper {

display: grid;

/* 声明了三列，宽度分别为 200px 100px 200px */

grid-template-columns: 200px 100px 200px;

grid-gap: 5px;

/* 声明了两行，行高分别为 50px 50px */

grid-template-rows: 50px 50px;

}

以上表示固定列宽为 200px 100px 200px，行高为 50px 50px

repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

.wrapper-1 {

display: grid;

grid-template-columns: 200px 100px 200px;

grid-gap: 5px;

/* 2行，而且行高都为 50px */

grid-template-rows: repeat(2, 50px);

}

auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：

.wrapper-2 {

display: grid;

grid-template-columns: repeat(auto-fill, 200px);

grid-gap: 5px;

grid-auto-rows: 50px;

}

fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示：

.wrapper-3 {

display: grid;

grid-template-columns: 200px 1fr 2fr;

grid-gap: 5px;

grid-auto-rows: 50px;

}

minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：

.wrapper-4 {

display: grid;

grid-template-columns: 1fr 1fr minmax(300px, 2fr);

grid-gap: 5px;

grid-auto-rows: 50px;

}

auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下：

.wrapper-5 {

display: grid;

grid-template-columns: 100px auto 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

}

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性演示地址

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。 grid-gap 属性是两者的简写形式。

grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

.wrapper {

display: grid;

grid-template-columns: 200px 100px 100px;

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

.wrapper-1 {

display: grid;

grid-template-columns: 200px 100px 100px;

grid-auto-rows: 50px;

grid-row-gap: 10px;

grid-column-gap: 20px;

}

以上两种写法效果是一样的。

grid-template-areas 属性

grid-area 以及 grid-template-areas演示地址

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。

grid-area 属性指定项目放在哪一个区域

.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: 120px 120px 120px;

grid-template-areas:

". header header"

"sidebar content content";

background-color: #fff;

color: #444;

}

上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。

.sidebar {

grid-area: sidebar;

}

.content {

grid-area: content;

}

.header {

grid-area: header;

}

以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中

grid-auto-flow 属性

grid-auto-flow 属性演示地址

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图英文数字的顺序 one,two,three...。这个顺序由 grid-auto-flow 属性决定，默认值是 row。

.wrapper {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-auto-flow: row;

grid-gap: 5px;

grid-auto-rows: 50px;

}

细心的同学可能发现了一个问题，就是第五个项目和第六个项目之间有个空白（如下图所示），这个是由于第六块的长度大于了空白处的长度，被挤到了下一行导致的。在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 grid-auto-flow: row dense，表示尽可能填满表格。代码以及效果如下所示：

.wrapper-2 {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-auto-flow: row dense;

grid-gap: 5px;

grid-auto-rows: 50px;

}

可以设置 grid-auto-flow: column，表示先列后行，代码以及效果如下图所示：

.wrapper-1 {

display: grid;

grid-auto-columns: 100px;

grid-auto-flow: column;

grid-gap: 5px;

grid-template-rows: 50px 50px;

}

justify-items 属性、align-items 属性以及 place-items 属性

justify-items 属性、align-items 属性演示地址

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）

下面以 justify-items 属性为例进行讲解，align-items 属性同理，只是方向为垂直方向。它们都有如下属性：

.container {

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

}

其代码实现以及效果如下：

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

justify-items: start;

}

.wrapper-1 {

justify-items: end;

}

.wrapper-2 {

justify-items: center;

}

.wrapper-3 {

justify-items: stretch;

}

start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中

stretch：拉伸，占满单元格的整个宽度（默认值）

justify-content 属性、align-content 属性以及 place-content 属性

justify-content 属性、align-content 属性演示地址

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。

.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

}

下面以 justify-content 属性为例进行讲解，align-content 属性同理，只是方向为垂直方向

start - 对齐容器的起始边框

end - 对齐容器的结束边框

center - 容器内部居中

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

justify-content: start;

}

.wrapper-1 {

justify-content: end;

}

.wrapper-2 {

justify-content: center;

}

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

stretch - 项目大小没有指定时，拉伸占据整个网格容器

.wrapper-3 {

justify-content: space-around;

}

.wrapper-4 {

justify-content: space-between;

}

.wrapper-5 {

justify-content: space-evenly;

}

.wrapper-6 {

justify-content: stretch;

}

grid-auto-columns 属性和 grid-auto-rows 属性

grid-auto-columns 属性和 grid-auto-rows 属性演示地址

在讲 grid-auto-columns 属性和 grid-auto-rows 属性之前，先来看看隐式和显示网格的概念

隐式和显示网格：显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列

假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和 grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

.wrapper {

display: grid;

grid-template-columns: 200px 100px;

/* 只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */

grid-template-rows: 100px 100px;

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列，但实际有九个元素，就会产生隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px

项目属性介绍

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

演示地址

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线

grid-column-end 属性：右边框所在的垂直网格线

grid-row-start 属性：上边框所在的水平网格线

grid-row-end 属性：下边框所在的水平网格线

.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;

grid-auto-rows: minmax(100px, auto);

}

.one {

grid-column-start: 1;

grid-column-end: 2;

background: #19CAAD;

}

.two {

grid-column-start: 2;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

/* 如果有重叠，就使用 z-index */

z-index: 1;

background: #8CC7B5;

}

.three {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 4;

background: #D1BA74;

}

.four {

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 2;

grid-row-end: 5;

background: #BEE7E9;

}

.five {

grid-column-start: 2;

grid-column-end: 2;

grid-row-start: 2;

grid-row-end: 5;

background: #E6CEAC;

}

.six {

grid-column: 3;

grid-row: 4;

background: #ECAD9E;

}

上面代码中，类 .two 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。其中它跟 .three （垂直网格线是从3 到 4，水平网格线是从 1 到 4） 是有冲突的。可以设置 z-index 去决定它们的层级关系

grid-area 属性

grid-area 属性指定项目放在哪一个区域，在上面介绍 grid-template-areas

的时候有提到过，这里不再具体展开，具体的使用可以参考演示地址：

grid-area 以及 grid-template-areas 属性演示地址

justify-self 属性、align-self 属性以及 place-self 属性

justify-self 属性/ align-self 属性/ place-self 属性演示地址

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目

align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

两者很相像，这里只拿 justify-self 属性演示，align-self 属性同理，只是作用于垂直方向

.item {

justify-self: start | end | center | stretch;

align-self: start | end | center | stretch;

}

.item {

justify-self: start;

}

.item-1 {

justify-self: end;

}

.item-2 {

justify-self: center;

}

.item-3 {

justify-self: stretch;

}

start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中

stretch：拉伸，占满单元格的整个宽度（默认值）

Grid 实战——实现响应式布局

经过上面的介绍，相信大家都可以看出，Grid 是非常强大的。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。我们接下来看看 Grid 布局是如何实现响应式布局的

fr 实现等分响应式

fr 实现等分响应式

fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

.wrapper {

margin: 50px;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

repeat + auto-fit——固定列宽，改变列数量

等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现，接下来看看更高级的响应式

上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：

演示地址

.wrapper {

margin: 50px;

display: grid;

grid-template-columns: repeat(auto-fit, 200px);

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

repeat+auto-fit+minmax 去掉右侧空白

上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则一起等分。代码以及效果如下所示：

演示地址

.wrapper {

margin: 50px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

repeat+auto-fit+minmax-span-dense 解决空缺问题

似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。具体的代码与效果如下所示：

.item-3 {

grid-column-start: span 3;

}

演示地址

不对，怎么右侧又有空白了？原来是有一些长度太长了，放不下，这个时候就到我们的 dense 关键字出场了。grid-auto-flow: row dense 表示尽可能填充，而不留空白，代码以及效果如下所示：

.wrapper, .wrapper-1 {

margin: 50px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

.wrapper-1 {

grid-auto-flow: row dense;

}

Grid 布局兼容性

最后，聊聊 Grid 布局兼容性问题，在 caniuse 中，我们可以看到的结果如下，总体兼容性还不错，但在 IE 10 以下不支持。个人建议在公司的内部系统运用起来是没有问题的，但 TOC 的话，可能目前还是不太合适

参考

常见的 Grid 布局用例

CSS Grid 网格布局教程

Grid 布局草案

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

MDN

Gopal

前端搬砖工 @富途

132

文章

978k

阅读

3.5k

粉丝 目录 收起

Grid 布局是什么？

Grid 布局和 flex 布局

Grid 的一些基础概念

容器属性介绍

display 属性

grid-template-columns 属性和 grid-template-rows 属性

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-template-areas 属性

grid-auto-flow 属性

justify-items 属性、align-items 属性以及 place-items 属性

justify-content 属性、align-content 属性以及 place-content 属性

grid-auto-columns 属性和 grid-auto-rows 属性

项目属性介绍

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

grid-area 属性

justify-self 属性、align-self 属性以及 place-self 属性

Grid 实战——实现响应式布局

fr 实现等分响应式

repeat + auto-fit——固定列宽，改变列数量

repeat+auto-fit+minmax 去掉右侧空白

repeat+auto-fit+minmax-span-dense 解决空缺问题

Grid 布局兼容性

参考

相关推荐 小册上新｜CSS 工程化核心原理与实战 715阅读  ·  1点赞弹性布局的一次奇妙探索，对布局的掌控力又增加一分 870阅读  ·  6点赞技术资讯：Firefox浏览器即将被淘汰？ 2.3k阅读  ·  9点赞技术资讯：VSCode大更新，这两个功能终于有了 22k阅读  ·  61点赞Flex 踩坑指南（文字、图片溢出问题） - Minimum Content Size In CSS Flexbox 987阅读  ·  7点赞 友情链接：

jsp预览ftp 中的pdf

grid - CSS：层叠样式表 | MDN

CSS

教程

CSS 基础

CSS 第一步

CSS 第一步概述

什么是 CSS

CSS 入门

CSS 的结构是怎样的

CSS 是如何工作的

测验：为传记页面添加样式

CSS 构建

CSS 构建基础概述

CSS 选择器

类型、类和 ID 选择器

属性选择器

伪类与伪元素

关系选择器

层叠、优先级与继承

层叠层

盒子模型

背景和边框

处理不同方向的文本

溢出的内容

CSS 的值和单位

在 CSS 中调整大小

图像、媒体和表单元素

样式化表格

调试 CSS

组织你的 CSS

测验：基本的 CSS 理解

测验：创建精美的信纸

测验：一个漂亮的盒子

样式化文本

样式化文本概述

基础文本与字体样式化

样式化列表

样式化链接

Web 字体

测验：排版社区大学首页

CSS 布局概述

CSS 布局概述

CSS 布局简介

一般的流布局

弹性盒布局

网格布局

浮动布局

定位

多栏式布局

响应式布局

媒体查询入门指南

传统的布局方法

支持旧版浏览器

测验：对布局基础知识的理解

参考

ModulesCSS animationsCSS backgrounds and bordersCSS basic user interfaceCSS box alignmentCSS box modelCSS cascade and inheritance (en-US)CSS custom properties for cascading variables (en-US)CSS color adjustment (en-US)CSS colorsCSS compositing and blending (en-US)CSS conditional rules (en-US)CSS containmentCSS counter stylesCSS display (en-US)CSS filter effects (en-US)CSS flexible box layoutCSS font loading (en-US)CSS fontsCSS fragmentationCSS generated contentCSS grid layoutCSS images (en-US)CSS lists and counters (en-US)CSS logical properties and valuesCSS maskingCSS media queriesCSS miscellaneous (en-US)CSS motion path (en-US)CSS multi-column layoutCSS namespaces (en-US)CSS nesting (en-US)CSS overflow (en-US)CSS overscroll behavior (en-US)CSS paged mediaCSS positioned layoutCSS properties and values API (en-US)CSS pseudo-elements (en-US)CSS ruby layout (en-US)CSS scoping (en-US)CSS scroll-driven animations (en-US)CSS scroll snapCSS scrollbars stylingCSS selectorsCSS shadow parts (en-US)CSS shapesCSS syntax (en-US)CSS tableCSS textCSS text decorationCSS transformsCSS transitionsCSS writing modesCSSOM view

Properties-moz-*-moz-float-edge (en-US)

非标准

已弃用

-moz-force-broken-image-icon (en-US)

非标准

已弃用

-moz-image-region (en-US)

非标准

-moz-orient (en-US)

非标准

-moz-user-focus (en-US)

非标准

已弃用

-moz-user-input

非标准

已弃用

-webkit-*-webkit-border-before

非标准

-webkit-box-reflect

非标准

-webkit-line-clamp-webkit-mask-attachment

非标准

-webkit-mask-box-image (en-US)

非标准

-webkit-mask-composite (en-US)

非标准

-webkit-mask-position-x (en-US)

非标准

-webkit-mask-position-y (en-US)

非标准

-webkit-mask-repeat-x (en-US)

非标准

-webkit-mask-repeat-y (en-US)

非标准

-webkit-overflow-scrolling

非标准

-webkit-tap-highlight-color

非标准

-webkit-text-fill-color-webkit-text-security (en-US)

非标准

-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-touch-callout

非标准

accent-coloralign-*align-contentalign-itemsalign-selfalign-tracks (en-US)

实验性

allanimation-*animationanimation-composition (en-US)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-range (en-US)

实验性

animation-range-end (en-US)

实验性

animation-range-start (en-US)

实验性

animation-timeline (en-US)

实验性

animation-timing-functionappearanceaspect-ratiobackdrop-filterbackface-visibilitybackground-*backgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeblock-sizeborder-*borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radius (en-US)border-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-*box-align (en-US)

非标准

已弃用

box-decoration-breakbox-direction (en-US)

非标准

已弃用

box-flex (en-US)

非标准

已弃用

box-flex-group (en-US)

非标准

已弃用

box-lines (en-US)

非标准

已弃用

box-ordinal-group (en-US)

非标准

已弃用

box-orient

非标准

已弃用

box-pack (en-US)

非标准

已弃用

box-shadowbox-sizingbreak-*break-afterbreak-before (en-US)break-insidecaption-sidecaret-colorclearclip

已弃用

clip-pathcolor-*colorcolor-interpolation (en-US)color-schemecolumn-*column-countcolumn-fill (en-US)column-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-width (en-US)columnscontain-*containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-widthcontainer-*container (en-US)container-name (en-US)container-type (en-US)contentcontent-visibility

实验性

counter-*counter-incrementcounter-resetcounter-setcursordirectiondisplayempty-cellsfilterflex-*flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont-*fontfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizing (en-US)font-palettefont-sizefont-size-adjustfont-smooth

非标准

font-stretchfont-stylefont-synthesisfont-synthesis-position (en-US)font-synthesis-small-caps (en-US)font-synthesis-style (en-US)font-synthesis-weight (en-US)font-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asian (en-US)font-variant-emoji (en-US)font-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightforced-color-adjust (en-US)gapgrid-*gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-end (en-US)grid-column-start (en-US)grid-rowgrid-row-end (en-US)grid-row-start (en-US)grid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphenate-character (en-US)hyphenate-limit-chars (en-US)hyphensimage-*image-orientationimage-renderingimage-resolution (en-US)

实验性

initial-letter (en-US)

实验性

initial-letter-align (en-US)

实验性

inline-sizeinset-*insetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startisolationjustify-*justify-contentjustify-itemsjustify-selfjustify-tracks (en-US)

实验性

leftletter-spacingline-*line-breakline-heightline-height-step (en-US)

实验性

list-*list-stylelist-style-imagelist-style-positionlist-style-typemargin-*marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim (en-US)

实验性

mask-*maskmask-bordermask-border-modemask-border-outset (en-US)mask-border-repeatmask-border-slicemask-border-source (en-US)mask-border-widthmask-clip (en-US)mask-composite (en-US)mask-imagemask-modemask-origin (en-US)mask-position (en-US)mask-repeatmask-size (en-US)mask-type (en-US)masonry-auto-flow (en-US)

实验性

math-*math-depth (en-US)math-shift (en-US)

实验性

math-style (en-US)max-*max-block-size (en-US)max-heightmax-inline-sizemax-widthmin-*min-block-sizemin-heightmin-inline-sizemin-widthmix-blend-modeobject-fitobject-positionoffset-*offsetoffset-anchor (en-US)offset-distance (en-US)offset-path (en-US)offset-position (en-US)offset-rotate (en-US)opacityorderorphans (en-US)outline-*outlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflow-*overflowoverflow-anchoroverflow-blockoverflow-clip-margin (en-US)overflow-inlineoverflow-wrapoverflow-xoverflow-yoverlay (en-US)

实验性

overscroll-*overscroll-behavioroverscroll-behavior-block (en-US)overscroll-behavior-inline (en-US)overscroll-behavior-xoverscroll-behavior-ypadding-*paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-toppage-*page (en-US)page-break-afterpage-break-before (en-US)page-break-inside (en-US)paint-orderperspectiveperspective-originplace-*place-contentplace-itemsplace-self (en-US)pointer-eventspositionprint-color-adjust (en-US)quotesresizerightrotaterow-gapruby-align (en-US)

实验性

ruby-position (en-US)scalescroll-*scroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-timeline (en-US)

实验性

scroll-timeline-axis (en-US)

实验性

scroll-timeline-name (en-US)

实验性

scrollbar-*scrollbar-colorscrollbar-gutter (en-US)scrollbar-widthshape-*shape-image-thresholdshape-marginshape-outsidetab-sizetable-layouttext-*text-aligntext-align-lasttext-combine-upright (en-US)text-decorationtext-decoration-colortext-decoration-linetext-decoration-skip

实验性

text-decoration-skip-ink (en-US)text-decoration-styletext-decoration-thicknesstext-emphasis (en-US)text-emphasis-color (en-US)text-emphasis-position (en-US)text-emphasis-style (en-US)text-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjust

实验性

text-transformtext-underline-offsettext-underline-positiontext-wrap (en-US)timeline-scope (en-US)

实验性

toptouch-actiontransform-*transformtransform-boxtransform-origintransform-styletransition-*transitiontransition-behavior (en-US)transition-delaytransition-durationtransition-propertytransition-timing-functiontranslateunicode-bidiuser-modify (en-US)

非标准

已弃用

user-selectvertical-alignview-*view-timeline (en-US)

实验性

view-timeline-axis (en-US)

实验性

view-timeline-inset (en-US)

实验性

view-timeline-name (en-US)

实验性

view-transition-name

实验性

visibilitywhite-spacewhite-space-collapse (en-US)widowswidthwill-changeword-breakword-spacingwriting-modez-indexzoom (en-US)

非标准

SelectorsAttribute selectorsClass selectorsID selectors& nesting selector (en-US)Type selectorsUniversal selectors

CombinatorsChild combinatorColumn combinator

实验性

Descendant combinatorNamespace separator (en-US)Next-sibling combinatorSelector listSubsequent-sibling combinator

Pseudo-classes:-moz-broken

非标准

:-moz-drag-over

非标准

:-moz-first-node

非标准

:-moz-handler-blocked (en-US)

非标准

:-moz-handler-crashed (en-US)

非标准

:-moz-handler-disabled (en-US)

非标准

:-moz-last-node (en-US)

非标准

:-moz-loading (en-US)

非标准

:-moz-locale-dir(ltr) (en-US)

非标准

:-moz-locale-dir(rtl) (en-US)

非标准

:-moz-only-whitespace

非标准

:-moz-submit-invalid (en-US)

非标准

:-moz-suppressed (en-US)

非标准

:-moz-user-disabled (en-US)

非标准

:-moz-window-inactive

非标准

:active:any-link:autofill:blank

实验性

:buffering (en-US):checked:current (en-US):default:defined:dir():disabled:empty:enabled:first:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future (en-US):has():host:host-context():host():hover:in-range:indeterminate:invalid:is():lang():last-child:last-of-type:left:link:local-link (en-US):modal (en-US):muted (en-US):not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:past (en-US):paused:picture-in-picture:placeholder-shown:playing:popover-open (en-US):read-only:read-write:required:right:root:scope:seeking (en-US):stalled (en-US):state() (en-US)

实验性

:target:target-within (en-US)

实验性

:user-invalid (en-US):user-valid (en-US):valid:visited:volume-locked (en-US):where()

Pseudo-elements::-moz-color-swatch (en-US)

非标准

::-moz-focus-inner (en-US)

实验性

::-moz-list-bullet (en-US)

非标准

::-moz-list-number (en-US)

非标准

::-moz-page (en-US)

非标准

::-moz-page-sequence (en-US)

非标准

::-moz-progress-bar

非标准

::-moz-range-progress

非标准

::-moz-range-thumb (en-US)

非标准

::-moz-range-track (en-US)

非标准

::-moz-scrolled-page-sequence (en-US)

非标准

::-webkit-inner-spin-button (en-US)

非标准

::-webkit-meter-bar (en-US)

非标准

::-webkit-meter-even-less-good-value (en-US)

非标准

::-webkit-meter-inner-element (en-US)

非标准

::-webkit-meter-optimum-value (en-US)

非标准

::-webkit-meter-suboptimum-value (en-US)

非标准

::-webkit-progress-bar

非标准

::-webkit-progress-inner-element

非标准

::-webkit-progress-value

非标准

::-webkit-scrollbar

非标准

::-webkit-search-cancel-button (en-US)

非标准

::-webkit-search-results-button (en-US)

非标准

::-webkit-slider-runnable-track

实验性

::-webkit-slider-thumb

实验性

::after::backdrop::before::cue::cue-region (en-US)::file-selector-button::first-letter::first-line::grammar-error::highlight() (en-US)::marker::part()::placeholder::selection::slotted()::spelling-error::target-text

实验性

::view-transition

实验性

::view-transition-group

实验性

::view-transition-image-pair

实验性

::view-transition-new

实验性

::view-transition-old

实验性

At-rules@charset@color-profile (en-US)@container (en-US)@counter-style@document

非标准

已弃用

@font-face@font-feature-values@font-palette-values (en-US)@import@keyframes@layer@media@namespace@page@property@scope (en-US)@starting-style (en-US)

实验性

@supports

Functions-moz-image-rect

非标准

已弃用

abs() (en-US)acos()asin()atan()atan2()attr()calc()clamp()cos()counter()counters()cross-fade() (en-US)element()

实验性

env()exp()fit-content()hypot()log()max()min()minmax()mod() (en-US)path() (en-US)pow()ray() (en-US)rem() (en-US)repeat()round() (en-US)sign() (en-US)sin()sqrt()symbols() (en-US)tan()url()var()

Types (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US)

已弃用

指南

动画

运用 CSS 动画

背景和边框

多个背景的应用

重设背景图片的大小

盒子的对齐方式

块布局中的盒对齐方式

弹性盒布局中的盒对齐方式

网格布局中的盒模型对齐 (en-US)

多栏式布局中的盒对齐方式 (en-US)

盒模型

CSS 基本盒模型简介

外边距重叠

颜色

使用 CSS 为 HTML 元素添加颜色

Web 无障碍：理解颜色和亮度 (en-US)

Web 无障碍：色彩对比度 (en-US)

多列

多栏式布局的基础概念

多栏式布局的样式

多栏式布局中的跨列与平衡 (en-US)

处理多栏式布局的溢出

多栏式布局中的内容换行 (en-US)

条件规则

运用特性查询

Containment

Using CSS containment (en-US)

CSS 容器查询

Using container size and style queries (en-US)

CSS 对象模型视图

坐标系

弹性盒布局

弹性盒布局基础

与其他布局的比较

弹性盒容器中的对齐方式

弹性盒布局中的排序方式

控制弹性盒子元素在主轴上的比例

包装弹性盒布局中的元素

经典的弹性盒布局示例

流式布局

一般的流式布局中的块式和行式布局

应用或脱离流式布局

格式化上下文简介

流式布局和书写模式

流式布局和溢出

字体

OpenType 字体特性指南

可变字体指南

网格布局

网格布局基础概念

和其他布局方法的联系

基于网格线的定位

网格模板区域

使用命名线布局

网格布局中的自动定位

网格布局中的盒模型对齐

网格、逻辑值和书写模式

网格布局和无障碍

网格布局和渐进增强

运用网格布局实现常见布局

子网格 (en-US)

Masonry 布局 (en-US)

图片

使用 CSS 渐变

列表和计数器

使用 CSS 计数器

使列表缩进一致

逻辑属性

基础概念

浮动和定位

内外边距和边框

调整尺寸

数学函数

使用 CSS 数学函数 (en-US)

媒体查询

使用媒体查询

无障碍相关的媒体查询 (en-US)

运用编程方法测试媒体查询

Printing

嵌套样式规则

使用 CSS 嵌套 (en-US)

嵌套 @ 规则 (en-US)

嵌套与优先级 (en-US)

定位

理解 CSS z-index

滚动吸附

滚动吸附的基本概念

形状

形状概述

使用 box 值指定形状

基本形状 (en-US)

从图片中指定形状 (en-US)

文本

包装文本和文本断行 (en-US)

变换

使用变换

过渡

使用过渡

布局手册

媒体对象

多列

居中一个元素

粘性页脚

分离式导航

面包屑导航

带有图标的列表 (en-US)

分页 (en-US)

卡片

网格布局包装器 (en-US)

工具

取色器

Box shadow 生成器

图片边框生成器

圆角边框生成器

In this article尝试一下语法实例规范浏览器兼容性参见gridBaseline Widely availableThis feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.Learn moreSee full compatibilityReport feedback

grid 是一个 CSS 简写属性，可以用来设置以下属性：

显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，

隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，

间距属性 grid-column-gap (en-US) 和 grid-row-gap (en-US)。

尝试一下

备注： 你仅可在一个 grid 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。

语法css/* <'grid-template'> values */

grid: none;

grid: "a" 100px "b" 1fr;

grid: [linename1] "a" 100px [linename2];

grid: "a" 200px "b" min-content;

grid: "a" minmax(100px, max-content) "b" 20%;

grid: 100px / 200px;

grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /

[ auto-flow && dense? ] <'grid-auto-columns'>? values */

grid: 200px / auto-flow;

grid: 30% / auto-flow dense;

grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /

<'grid-template-columns'> values */

grid: auto-flow / 200px;

grid: auto-flow dense / 30%;

grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);

grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */

grid: inherit;

grid: initial;

grid: unset;

值

<'grid-template'>

定义了 grid-template，其包含 grid-template-columns，grid-template-rows 和 grid-template-areas。

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

通过 grid-template-rows 属性显式设置行轨道来设置自动流（grid-template-columns 属性设为 none），并通过 grid-auto-columns 明确该如何自动重复列轨道（同时grid-auto-rows属性设为 auto）。grid-auto-flow 属性也被相应的设置为 column，并可附有 dense。

所有其余 grid 次级属性被重置为初始值。

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

通过 grid-template-columns 属性显式设置列轨道来设置自动流（grid-template-rows 属性设为 none），并通过 grid-auto-rows 明确该如何自动重复行轨道（同时grid-auto-columns属性设为 auto）。grid-auto-flow 属性也被相应的设置为 row，并可附有 dense。

所有其余 grid 次级属性被重置为初始值。

标准语法grid = <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> 实例HTMLhtml

CSScss#container {

display: grid;

grid: repeat(2, 60px) / auto-flow 80px;

}

#container > div {

background-color: #8ca0ff;

width: 50px;

height: 50px;

}

结果规范SpecificationCSS Grid Layout Module Level 2 # grid-shorthand浏览器兼容性BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.参见

相关 CSS 属性：grid-template, grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-columns, grid-auto-rows, grid-auto-flow

网格布局指南：Line-based placement with CSS Grid

网格布局指南：Grid template areas - Grid definition shorthands

Help improve MDNWas this page helpful to you?YesNoLearn how to contribute.This page was last modified on 2023年8月31日 by MDN contributors.View this page on GitHub• Report a problem with this contentMDN logoYour blueprint for a better internet.MDN on MastodonMDN on X (formerly Twitter)MDN on GitHubMDN Blog RSS FeedMDNAboutBlogCareersAdvertise with usSupportProduct helpReport an issueOur communitiesMDN CommunityMDN ForumMDN ChatDevelopersWeb TechnologiesLearn Web DevelopmentMDN PlusHacks BlogMozilla logoWebsite Privacy NoticeCookiesLegalCommunity Participation GuidelinesVisit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a Creative Commons licen

GRID中文(简体)翻译：剑桥词典

GRID中文(简体)翻译：剑桥词典

词典

翻译

语法

同义词词典

+Plus

剑桥词典+Plus

Shop

剑桥词典+Plus

我的主页

+Plus 帮助

退出

剑桥词典+Plus

我的主页

+Plus 帮助

退出

登录

/

注册

中文 (简体)

查找

查找

英语-中文（简体）

grid 在英语-中文（简体）词典中的翻译

gridnoun [ C ] uk

Your browser doesn't support HTML5 audio

/ɡrɪd/ us

Your browser doesn't support HTML5 audio

/ɡrɪd/

grid noun [C]

(PATTERN/STRUCTURE)

Add to word list

Add to word list

a pattern or structure made from horizontal and vertical lines crossing each other to form squares

网格，方格;格栅，格子

A metal grid had been placed over the hole to prevent people from falling in.

在洞口铺了一个铁格栅，以免有人跌入。

In Barcelona the streets are laid out in/on a grid system.

巴塞罗那的街道是棋盘式的布局。

也请参见

gridiron US

grid noun [C]

(ELECTRICITY)

a system of wires through which electricity is connected to different power stations across a region

电力网，输电网

the national grid

全国输电网

grid noun [C]

(MAP)

a pattern of squares with numbers or letters used to find places on a map

（地图的）坐标方格

grid noun [C]

(MOTOR RACING)

(also starting grid) a pattern of lines marking the start of the track in motor racing (= a sport of racing very fast and powerful cars around a track)

赛车起跑线

In all, 26 drivers will be on the starting grid tomorrow.

明天总共有 26 名车手将在起跑线上。

(grid在剑桥英语-中文（简体）词典的翻译 © Cambridge University Press)

grid的例句

grid

The electrodes 9 and 10 are made of tungsten grids of about 95% transparency.

来自 Cambridge English Corpus

Here we consider the minimization problem on a sequence of grids, solve the resulting linear systems (5.23), and combine the solution accordingly.

来自 Cambridge English Corpus

In contrast to that, regular sparse grids show large errors near the singularity.

来自 Cambridge English Corpus

The following pages show how metrical grids and moraic approaches handle the threefold typology ; our own analysis is presented in 8.2.

来自 Cambridge English Corpus

We now show that for a large class of graphs, including d-dimensional grids and tori, this running time is optimal.

来自 Cambridge English Corpus

Starting from their properties, sparse grids are defined via an optimization process in a cost-benefit spirit closely related to the notion of n-term approximation.

来自 Cambridge English Corpus

Two variables indexing the variability of the interactions (fluctuation and stability) were derived from these grids.

来自 Cambridge English Corpus

We take this as an indication that the energy transfer from the grids to the tank centre is independent of the effects of viscosity.

来自 Cambridge English Corpus

示例中的观点不代表剑桥词典编辑、剑桥大学出版社和其许可证颁发者的观点。

B1

grid的翻译

中文（繁体）

形狀／結構, 網格，方格, 格柵，格子…

查看更多内容

西班牙语

rejilla, cuadrícula, red…

查看更多内容

葡萄牙语

grade, rede, quadrícula…

查看更多内容

更多语言

土耳其语

法语

日语

in Dutch

捷克语

丹麦语

印尼语

泰语

越南语

波兰语

in Swedish

马来语

德语

挪威语

in Ukrainian

俄语

biribirini yatay ve dikey çizgilerle kesen karelerden oluşan koordinat sistemi, kareler düzeni, elektrik şebekesi…

查看更多内容

grille [feminine], grille…

查看更多内容

格子（こうし）…

查看更多内容

net(werk), (braad)rooster, traliewerk…

查看更多内容

kartografická síť, mříž…

查看更多内容

linienet, gitter…

查看更多内容

kotak-kotak dalam peta, jeruji…

查看更多内容

เส้นแนวตั้งและแนวนอนบนแผนที่, ตะแกรง…

查看更多内容

đường kẻ ô, vỉ, chấn xong…

查看更多内容

kratka, siatka, sieć…

查看更多内容

rutnät, rutsystem, galler…

查看更多内容

grid, jaring-jaring…

查看更多内容

das Gitter…

查看更多内容

rist [masculine], gitter [neuter], rutenett [neuter]…

查看更多内容

сітка, решітка…

查看更多内容

решетка, электросеть, координатная сетка…

查看更多内容

需要一个翻译器吗？

获得快速、免费的翻译！

翻译器工具

grid的发音是什么？

在英语词典中查看 grid 的释义

浏览

greyhound

greying

greyish

greyness

grid

grid reference

griddle

griddle cake

gridiron

grid更多的中文(简体)翻译

全部

off-grid

cattle grid

grid reference

national grid

off-the-grid

off-grid, at off-the-grid

cattle grid, at cattle guard

查看全部意思»

“每日一词”

veggie burger

UK

Your browser doesn't support HTML5 audio

/ˈvedʒ.i ˌbɜː.ɡər/

US

Your browser doesn't support HTML5 audio

/ˈvedʒ.i ˌbɝː.ɡɚ/

a type of food similar to a hamburger but made without meat, by pressing together small pieces of vegetables, seeds, etc. into a flat, round shape

关于这个

博客

Forget doing it or forget to do it? Avoiding common mistakes with verb patterns (2)

March 06, 2024

查看更多

新词

stochastic parrot

March 04, 2024

查看更多

已添加至 list

回到页面顶端

内容

英语-中文（简体）例句翻译

©剑桥大学出版社与评估2024

学习

学习

学习

新词

帮助

纸质书出版

Word of the Year 2021

Word of the Year 2022

Word of the Year 2023

开发

开发

开发

词典API

双击查看

搜索Widgets

执照数据

关于

关于

关于

无障碍阅读

剑桥英语教学

剑桥大学出版社与评估

授权管理

Cookies与隐私保护

语料库

使用条款

京ICP备14002226号-2

©剑桥大学出版社与评估2024

剑桥词典+Plus

我的主页

+Plus 帮助

退出

词典

定义

清晰解释自然的书面和口头英语

英语

学习词典

基础英式英语

基础美式英语

翻译

点击箭头改变翻译方向。

双语词典

英语-中文（简体）

Chinese (Simplified)–English

英语-中文（繁体）

Chinese (Traditional)–English

英语-荷兰语

荷兰语-英语

英语-法语

法语-英语

英语-德语

德语-英语

英语-印尼语

印尼语-英语

英语-意大利语

意大利语-英语

英语-日语

日语-英语

英语-挪威语

挪威语-英语

英语-波兰语

波兰语-英语

英语-葡萄牙语

葡萄牙语-英语

英语-西班牙语

西班牙语-英语

English–Swedish

Swedish–English

半双语词典

英语-阿拉伯语

英语-孟加拉语

英语-加泰罗尼亚语

英语-捷克语

英语-丹麦语

English–Gujarati

英语-印地语

英语-韩语

英语-马来语

英语-马拉地语

英语-俄语

English–Tamil

English–Telugu

英语-泰语

英语-土耳其语

英语-乌克兰语

English–Urdu

英语-越南语

翻译

语法

同义词词典

Pronunciation

剑桥词典+Plus

Shop

剑桥词典+Plus

我的主页

+Plus 帮助

退出

登录 /

注册

中文 (简体)  

Change

English (UK)

English (US)

Español

Русский

Português

Deutsch

Français

Italiano

中文 (简体)

正體中文 (繁體)

Polski

한국어

Türkçe

日本語

Tiếng Việt

हिंदी

தமிழ்

తెలుగు

关注我们

选择一本词典

最近的词和建议

定义

清晰解释自然的书面和口头英语

英语

学习词典

基础英式英语

基础美式英语

语法与同义词词典

对自然书面和口头英语用法的解释

英语语法

同义词词典

Pronunciation

British and American pronunciations with audio

English Pronunciation

翻译

点击箭头改变翻译方向。

双语词典

英语-中文（简体）

Chinese (Simplified)–English

英语-中文（繁体）

Chinese (Traditional)–English

英语-荷兰语

荷兰语-英语

英语-法语

法语-英语

英语-德语

德语-英语

英语-印尼语

印尼语-英语

英语-意大利语

意大利语-英语

英语-日语

日语-英语

英语-挪威语

挪威语-英语

英语-波兰语

波兰语-英语

英语-葡萄牙语

葡萄牙语-英语

英语-西班牙语

西班牙语-英语

English–Swedish

Swedish–English

半双语词典

英语-阿拉伯语

英语-孟加拉语

英语-加泰罗尼亚语

英语-捷克语

英语-丹麦语

English–Gujarati

英语-印地语

英语-韩语

英语-马来语

英语-马拉地语

英语-俄语

English–Tamil

English–Telugu

英语-泰语

英语-土耳其语

英语-乌克兰语

English–Urdu

英语-越南语

词典+Plus

词汇表

选择语言

中文 (简体)  

English (UK)

English (US)

Español

Русский

Português

Deutsch

Français

Italiano

正體中文 (繁體)

Polski

한국어

Türkçe

日本語

Tiếng Việt

हिंदी

தமிழ்

తెలుగు

内容

英语-中文（简体） 

Noun 

grid (PATTERN/STRUCTURE)

grid (ELECTRICITY)

grid (MAP)

grid (MOTOR RACING)

例句

Translations

语法

所有翻译

我的词汇表

把grid添加到下面的一个词汇表中，或者创建一个新词汇表。

更多词汇表

前往词汇表

对该例句有想法吗？

例句中的单词与输入词条不匹配。

该例句含有令人反感的内容。

取消

提交

例句中的单词与输入词条不匹配。

该例句含有令人反感的内容。

取消

提交

最强大的 CSS 布局 —— Grid 布局 - 知乎

最强大的 CSS 布局 —— Grid 布局 - 知乎首发于前端杂货铺切换模式写文章登录/注册最强大的 CSS 布局 —— Grid 布局GopalGrid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。Grid 布局远比 flex 布局强大！flex布局示例:Grid 布局示例：Grid 的一些基础概念 我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址

.wrapper {

margin: 60px;

/* 声明一个容器 */

display: grid;

/* 声明列的宽度 */

grid-template-columns: repeat(3, 200px);

/* 声明行间距和列间距 */

grid-gap: 20px;

/* 声明行的高度 */

grid-template-rows: 100px 200px;

}

.one {

background: #19CAAD;

}

.two {

background: #8CC7B5;

}

.three {

background: #D1BA74;

}

.four {

background: #BEE7E9;

}

.five {

background: #E6CEAC;

}

.six {

background: #ECAD9E;

}

.item {

text-align: center;

font-size: 200%;

color: #fff;

}容器和项目：我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。比如上面 .wrapper 所在的元素为一个网格容器，其直系子元素将成为网格项目。网格轨道：grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。上图中 One、Two、Three 组成了一行，One、Four 则是一列网格单元：一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。上图中 One、Two、Three、Four...都是一个个的网格单元网格线：划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序容器属性介绍 Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性display 属性display 属性演示我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素.wrapper {

display: grid;

}.wrapper-1 {

display: inline-grid;

}grid-template-columns 属性和 grid-template-rows 属性grid-template-columns 和 grid-template-rows 属性演示地址grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，这两个属性在 Grid 布局中尤为重要，它们的值是有多种多样的，而且它们的设置是比较相似的，下面针对 grid-template-columns 属性进行讲解固定的列宽和行高.wrapper {

display: grid;

/* 声明了三列，宽度分别为 200px 100px 200px */

grid-template-columns: 200px 100px 200px;

grid-gap: 5px;

/* 声明了两行，行高分别为 50px 50px */

grid-template-rows: 50px 50px;

}以上表示固定列宽为 200px 100px 200px，行高为 50px 50pxrepeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的.wrapper-1 {

display: grid;

grid-template-columns: 200px 100px 200px;

grid-gap: 5px;

/* 2行，而且行高都为 50px */

grid-template-rows: repeat(2, 50px);

}auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：.wrapper-2 {

display: grid;

grid-template-columns: repeat(auto-fill, 200px);

grid-gap: 5px;

grid-auto-rows: 50px;

}fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示：.wrapper-3 {

display: grid;

grid-template-columns: 200px 1fr 2fr;

grid-gap: 5px;

grid-auto-rows: 50px;

}minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：.wrapper-4 {

display: grid;

grid-template-columns: 1fr 1fr minmax(300px, 2fr);

grid-gap: 5px;

grid-auto-rows: 50px;

}auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下：.wrapper-5 {

display: grid;

grid-template-columns: 100px auto 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

}grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性演示地址grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的.wrapper {

display: grid;

grid-template-columns: 200px 100px 100px;

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

.wrapper-1 {

display: grid;

grid-template-columns: 200px 100px 100px;

grid-auto-rows: 50px;

grid-row-gap: 10px;

grid-column-gap: 20px;

}以上两种写法效果是一样的。grid-template-areas 属性grid-area 以及 grid-template-areas演示地址grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。 grid-area 属性指定项目放在哪一个区域.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: 120px 120px 120px;

grid-template-areas:

". header header"

"sidebar content content";

background-color: #fff;

color: #444;

}上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。.sidebar {

grid-area: sidebar;

}

.content {

grid-area: content;

}

.header {

grid-area: header;

}以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中grid-auto-flow 属性grid-auto-flow 属性演示地址grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图英文数字的顺序 one,two,three...。这个顺序由 grid-auto-flow 属性决定，默认值是 row。.wrapper {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-auto-flow: row;

grid-gap: 5px;

grid-auto-rows: 50px;

}细心的同学可能发现了一个问题，就是第五个项目和第六个项目之间有个空白（如下图所示），这个是由于第六块的长度大于了空白处的长度，被挤到了下一行导致的。在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 grid-auto-flow: row dense，表示尽可能填满表格。代码以及效果如下所示：.wrapper-2 {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-auto-flow: row dense;

grid-gap: 5px;

grid-auto-rows: 50px;

}可以设置 grid-auto-flow: column，表示先列后行，代码以及效果如下图所示：.wrapper-1 {

display: grid;

grid-auto-columns: 100px;

grid-auto-flow: column;

grid-gap: 5px;

grid-template-rows: 50px 50px;

}justify-items 属性、align-items 属性以及 place-items 属性justify-items 属性、align-items 属性演示地址justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）下面以 justify-items 属性为例进行讲解，align-items 属性同理，只是方向为垂直方向。它们都有如下属性：.container {

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

}其代码实现以及效果如下：.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

justify-items: start;

}

.wrapper-1 {

justify-items: end;

}

.wrapper-2 {

justify-items: center;

}

.wrapper-3 {

justify-items: stretch;

}start：对齐单元格的起始边缘end：对齐单元格的结束边缘center：单元格内部居中stretch：拉伸，占满单元格的整个宽度（默认值）justify-content 属性、align-content 属性以及 place-content 属性justify-content 属性、align-content 属性演示地址justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

}下面以 justify-content 属性为例进行讲解，align-content 属性同理，只是方向为垂直方向start - 对齐容器的起始边框end - 对齐容器的结束边框center - 容器内部居中.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {

display: grid;

grid-template-columns: 100px 200px 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

justify-content: start;

}

.wrapper-1 {

justify-content: end;

}

.wrapper-2 {

justify-content: center;

}space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔stretch - 项目大小没有指定时，拉伸占据整个网格容器.wrapper-3 {

justify-content: space-around;

}

.wrapper-4 {

justify-content: space-between;

}

.wrapper-5 {

justify-content: space-evenly;

}

.wrapper-6 {

justify-content: stretch;

}grid-auto-columns 属性和 grid-auto-rows 属性grid-auto-columns 属性和 grid-auto-rows 属性演示地址在讲 grid-auto-columns 属性和 grid-auto-rows 属性之前，先来看看隐式和显示网格的概念隐式和显示网格：显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高.wrapper {

display: grid;

grid-template-columns: 200px 100px;

/* 只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */

grid-template-rows: 100px 100px;

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列，但实际有九个元素，就会产生隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px项目属性介绍 grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性演示地址可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置grid-column-start 属性：左边框所在的垂直网格线grid-column-end 属性：右边框所在的垂直网格线grid-row-start 属性：上边框所在的水平网格线grid-row-end 属性：下边框所在的水平网格线.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;

grid-auto-rows: minmax(100px, auto);

}

.one {

grid-column-start: 1;

grid-column-end: 2;

background: #19CAAD;

}

.two {

grid-column-start: 2;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

/* 如果有重叠，就使用 z-index */

z-index: 1;

background: #8CC7B5;

}

.three {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 4;

background: #D1BA74;

}

.four {

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 2;

grid-row-end: 5;

background: #BEE7E9;

}

.five {

grid-column-start: 2;

grid-column-end: 2;

grid-row-start: 2;

grid-row-end: 5;

background: #E6CEAC;

}

.six {

grid-column: 3;

grid-row: 4;

background: #ECAD9E;

}上面代码中，类 .two 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。其中它跟 .three （垂直网格线是从3 到 4，水平网格线是从 1 到 4） 是有冲突的。可以设置 z-index 去决定它们的层级关系grid-area 属性grid-area 属性指定项目放在哪一个区域，在上面介绍 grid-template-areas 的时候有提到过，这里不再具体展开，具体的使用可以参考演示地址：grid-area 以及 grid-template-areas 属性演示地址justify-self 属性、align-self 属性以及 place-self 属性justify-self 属性/ align-self 属性/ place-self 属性演示地址justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目两者很相像，这里只拿 justify-self 属性演示，align-self 属性同理，只是作用于垂直方向.item {

justify-self: start | end | center | stretch;

align-self: start | end | center | stretch;

}

.item {

justify-self: start;

}

.item-1 {

justify-self: end;

}

.item-2 {

justify-self: center;

}

.item-3 {

justify-self: stretch;

}start：对齐单元格的起始边缘end：对齐单元格的结束边缘center：单元格内部居中 stretch：拉伸，占满单元格的整个宽度（默认值） Grid 实战——实现响应式布局 经过上面的介绍，相信大家都可以看出，Grid 是非常强大的。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。我们接下来看看 Grid 布局是如何实现响应式布局的fr 实现等分响应式fr 实现等分响应式fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分.wrapper {

margin: 50px;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}repeat + auto-fit——固定列宽，改变列数量等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现，接下来看看更高级的响应式上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：演示地址.wrapper {

margin: 50px;

display: grid;

grid-template-columns: repeat(auto-fit, 200px);

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}repeat+auto-fit+minmax 去掉右侧空白上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则一起等分。代码以及效果如下所示：演示地址.wrapper {

margin: 50px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}repeat+auto-fit+minmax-span-dense 解决空缺问题似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。具体的代码与效果如下所示：.item-3 {

grid-column-start: span 3;

}演示地址不对，怎么右侧又有空白了？原来是有一些长度太长了，放不下，这个时候就到我们的 dense 关键字出场了。grid-auto-flow: row dense 表示尽可能填充，而不留空白，代码以及效果如下所示：.wrapper, .wrapper-1 {

margin: 50px;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

.wrapper-1 {

grid-auto-flow: row dense;

}Grid 布局兼容性 最后，聊聊 Grid 布局兼容性问题，在 caniuse 中，我们可以看到的结果如下，总体兼容性还不错，但在 IE 10 以下不支持。个人建议在公司的内部系统运用起来是没有问题的，但 TOC 的话，可能目前还是不太合适参考 常见的 Grid 布局用例CSS Grid 网格布局教程Grid 布局草案一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局MDN编辑于 2020-09-21 08:49CSSCSS 布局前端开发​赞同 110​​8 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录前端杂货铺一个有温度致力且于前端分享的杂货铺

CSS 网格布局 | 菜鸟教程

CSS 网格布局 | 菜鸟教程

菜鸟教程 -- 学的不仅是技术，更是梦想！

首页

HTML

CSS

JavaScript

Vue

Bootstrap

NodeJS

Python3

Python2

Java

C

C++

C#

Go

SQL

Linux

jQuery

本地书签

首页

HTML

CSS

JS

本地书签

Search

Python3 教程

Python2 教程

Vue3 教程

vue2 教程

Bootstrap3 教程

Bootstrap4 教程

Bootstrap5 教程

Bootstrap2 教程

CSS3 教程

CSS3 教程

CSS3 简介

CSS3 边框

CSS3 圆角

CSS3 背景

CSS3 渐变

CSS3 文本效果

CSS3 字体

CSS3 2D 转换

CSS3 3D 转换

CSS3 过渡

CSS3 动画

CSS3 多列

CSS3 用户界面

CSS3 图片

CSS3 按钮

CSS3 分页

CSS3 框大小

CSS3 弹性盒子

CSS3 多媒体查询

CSS3 多媒体查询实例

CSS 网格布局

CSS 网格容器

CSS 网格元素

CSS3 rotation-point

CSS 网格容器

CSS 网格布局

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

以下是一个简单的网页布局，使用了网格布局，包含六列和三行：

尝试一下 »

浏览器支持

目前最新的一些浏览器版本都支持网格布局。

57.0

16.0

52.0

10

44

网格元素

网格布局由一个父元素及一个或多个子元素组成。

实例

尝试一下 »

display 属性

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

实例 .grid-container {

display: grid;

}

尝试一下 »

实例 .grid-container {

display: inline-grid;

}

尝试一下 »

网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。

这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。

在下图中你可以看到一个绿色框的轨道——网格的第一个行轨道。第二行有三个白色框轨道。

以下实例我们使用 grid-template-columns 属性在网格容器中创建四个列:

实例 .grid-container {

display: grid;

grid-template-columns: auto auto auto auto;

}

尝试一下 »

以下实例我们使用 grid-template-rows 属性在网格容器中设置行的高度:

实例 .grid-container {

display: grid;

grid-template-rows: 100px 300px;

}

尝试一下 »

fr 单位

轨道可以使用任何长度单位进行定义。

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

实例 .grid-container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

尝试一下 »

网格单元

一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。

网格区域

网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。下图高亮的网格区域扩展了2列以及2行。

网格列

网格元素的垂直线方向称为列（Column）。

网格行

网格元素的水平线方向称为行（Row）。

网格间距

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。

您可以使用以下属性来调整间隙大小：

grid-column-gap

grid-row-gap

grid-gap

以下实例使用 grid-column-gap 属性来设置列之间的网格间距：

实例 .grid-container {

display: grid;

grid-column-gap: 50px;

}

尝试一下 »

以下实例使用 grid-row-gap 属性来设置行之间的网格间距：

实例 .grid-container {

display: grid;

grid-row-gap: 50px;

}

尝试一下 »

grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写:

实例 .grid-container {

display: grid;

grid-gap: 50px 100px;

}

尝试一下 »

grid-gap 属性可以同时设置行间距和列间距:

实例 .grid-container {

display: grid;

grid-gap: 50px;

}

尝试一下 »

网格线

列与列，行与行之间的交接处就是网格线。

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）。

网格元素设置时可以参考这些行号。

下图则定义了四条纵向的网格线，以及四条横向的网格线：

网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。

接下来我使用了 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。

以下实例我们设置一个网格元素的网格线从第一列开始，第三列结束：

实例 .item1 {

grid-column-start: 1;

grid-column-end: 3;

}

尝试一下 »

以下实例我们设置一个网格元素的网格线从第一行开始，第三行结束：

实例 .item1 {

grid-row-start: 1;

grid-row-end: 3;

}

尝试一下 »

CSS 网格属性

属性

描述

column-gap

指定列之间的间隙

gap

row-gap 和 column-gap 的简写属性

grid

grid-template-rows,

grid-template-columns, grid-template-areas, grid-auto-rows,

grid-auto-columns, 以及 grid-auto-flow 的简写属性

grid-area

指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性

grid-auto-columns

指的默认的列尺寸

grid-auto-flow

指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

grid-auto-rows

指的默认的行尺寸

grid-column

grid-column-start 和 grid-column-end 的简写属性

grid-column-end

指定网格元素列的结束位置

grid-column-gap

指定网格元素的间距大小

grid-column-start

指定网格元素列的开始位置

grid-gap

grid-row-gap 和 grid-column-gap 的简写属性

grid-row

grid-row-start 和 grid-row-end 的简写属性

grid-row-end

指定网格元素行的结束位置

grid-row-gap

指定网格元素的行间距

grid-row-start

指定网格元素行的开始位置

grid-template

grid-template-rows, grid-template-columns

和 grid-areas 的简写属性

grid-template-areas

指定如何显示行和列，使用命名的网格元素

grid-template-columns

指定列的大小，以及网格布局中设置列的数量

grid-template-rows

指定网格布局中行的大小

row-gap

指定两个行之间的间距

接下来我们可以通过 CSS 网格布局小游戏来检验我们的学习成果。

CSS3 rotation-point

CSS 网格容器

点我分享笔记

取消

分享笔记

昵称昵称 (必填)

邮箱邮箱 (必填)

引用地址引用地址

分类导航

HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程FastAPI 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质

Advertisement

反馈/建议

在线实例

·HTML 实例

·CSS 实例

·JavaScript 实例

·Ajax 实例

·jQuery 实例

·XML 实例

·Java 实例

字符集&工具

· HTML 字符集设置

· HTML ASCII 字符集

· JS 混淆/加密

· PNG/JPEG 图片压缩

· HTML 拾色器

· JSON 格式化工具

· 随机数生成器

最新更新

·

Rust 宏

·

Seaborn 教程

·

Pandas 相关性分析

·

31.2k star, 免...

·

Dev Home —...

·

免费开源的 AI ...

·

11.2k star, 免...

站点信息

·

意见反馈

·

免责声明

·

关于我们

·

文章归档

关注微信

Copyright © 2013-2024 菜鸟教程 

runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1

微信关注

网格布局的基本概念 - CSS：层叠样式表 | MDN

CSS

教程

CSS 基础

CSS 第一步

CSS 第一步概述

什么是 CSS

CSS 入门

CSS 的结构是怎样的

CSS 是如何工作的

测验：为传记页面添加样式

CSS 构建

CSS 构建基础概述

CSS 选择器

类型、类和 ID 选择器

属性选择器

伪类与伪元素

关系选择器

层叠、优先级与继承

层叠层

盒子模型

背景和边框

处理不同方向的文本

溢出的内容

CSS 的值和单位

在 CSS 中调整大小

图像、媒体和表单元素

样式化表格

调试 CSS

组织你的 CSS

测验：基本的 CSS 理解

测验：创建精美的信纸

测验：一个漂亮的盒子

样式化文本

样式化文本概述

基础文本与字体样式化

样式化列表

样式化链接

Web 字体

测验：排版社区大学首页

CSS 布局概述

CSS 布局概述

CSS 布局简介

一般的流布局

弹性盒布局

网格布局

浮动布局

定位

多栏式布局

响应式布局

媒体查询入门指南

传统的布局方法

支持旧版浏览器

测验：对布局基础知识的理解

参考

ModulesCSS animationsCSS backgrounds and bordersCSS basic user interfaceCSS box alignmentCSS box modelCSS cascade and inheritance (en-US)CSS custom properties for cascading variables (en-US)CSS color adjustment (en-US)CSS colorsCSS compositing and blending (en-US)CSS conditional rules (en-US)CSS containmentCSS counter stylesCSS display (en-US)CSS filter effects (en-US)CSS flexible box layoutCSS font loading (en-US)CSS fontsCSS fragmentationCSS generated contentCSS grid layoutCSS images (en-US)CSS lists and counters (en-US)CSS logical properties and valuesCSS maskingCSS media queriesCSS miscellaneous (en-US)CSS motion path (en-US)CSS multi-column layoutCSS namespaces (en-US)CSS nesting (en-US)CSS overflow (en-US)CSS overscroll behavior (en-US)CSS paged mediaCSS positioned layoutCSS properties and values API (en-US)CSS pseudo-elements (en-US)CSS ruby layout (en-US)CSS scoping (en-US)CSS scroll-driven animations (en-US)CSS scroll snapCSS scrollbars stylingCSS selectorsCSS shadow parts (en-US)CSS shapesCSS syntax (en-US)CSS tableCSS textCSS text decorationCSS transformsCSS transitionsCSS writing modesCSSOM view

Properties-moz-*-moz-float-edge (en-US)

非标准

已弃用

-moz-force-broken-image-icon (en-US)

非标准

已弃用

-moz-image-region (en-US)

非标准

-moz-orient (en-US)

非标准

-moz-user-focus (en-US)

非标准

已弃用

-moz-user-input

非标准

已弃用

-webkit-*-webkit-border-before

非标准

-webkit-box-reflect

非标准

-webkit-line-clamp-webkit-mask-attachment

非标准

-webkit-mask-box-image (en-US)

非标准

-webkit-mask-composite (en-US)

非标准

-webkit-mask-position-x (en-US)

非标准

-webkit-mask-position-y (en-US)

非标准

-webkit-mask-repeat-x (en-US)

非标准

-webkit-mask-repeat-y (en-US)

非标准

-webkit-overflow-scrolling

非标准

-webkit-tap-highlight-color

非标准

-webkit-text-fill-color-webkit-text-security (en-US)

非标准

-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-touch-callout

非标准

accent-coloralign-*align-contentalign-itemsalign-selfalign-tracks (en-US)

实验性

allanimation-*animationanimation-composition (en-US)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-range (en-US)

实验性

animation-range-end (en-US)

实验性

animation-range-start (en-US)

实验性

animation-timeline (en-US)

实验性

animation-timing-functionappearanceaspect-ratiobackdrop-filterbackface-visibilitybackground-*backgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeblock-sizeborder-*borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radius (en-US)border-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-*box-align (en-US)

非标准

已弃用

box-decoration-breakbox-direction (en-US)

非标准

已弃用

box-flex (en-US)

非标准

已弃用

box-flex-group (en-US)

非标准

已弃用

box-lines (en-US)

非标准

已弃用

box-ordinal-group (en-US)

非标准

已弃用

box-orient

非标准

已弃用

box-pack (en-US)

非标准

已弃用

box-shadowbox-sizingbreak-*break-afterbreak-before (en-US)break-insidecaption-sidecaret-colorclearclip

已弃用

clip-pathcolor-*colorcolor-interpolation (en-US)color-schemecolumn-*column-countcolumn-fill (en-US)column-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-width (en-US)columnscontain-*containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-widthcontainer-*container (en-US)container-name (en-US)container-type (en-US)contentcontent-visibility

实验性

counter-*counter-incrementcounter-resetcounter-setcursordirectiondisplayempty-cellsfilterflex-*flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont-*fontfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizing (en-US)font-palettefont-sizefont-size-adjustfont-smooth

非标准

font-stretchfont-stylefont-synthesisfont-synthesis-position (en-US)font-synthesis-small-caps (en-US)font-synthesis-style (en-US)font-synthesis-weight (en-US)font-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asian (en-US)font-variant-emoji (en-US)font-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightforced-color-adjust (en-US)gapgrid-*gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-end (en-US)grid-column-start (en-US)grid-rowgrid-row-end (en-US)grid-row-start (en-US)grid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphenate-character (en-US)hyphenate-limit-chars (en-US)hyphensimage-*image-orientationimage-renderingimage-resolution (en-US)

实验性

initial-letter (en-US)

实验性

initial-letter-align (en-US)

实验性

inline-sizeinset-*insetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startisolationjustify-*justify-contentjustify-itemsjustify-selfjustify-tracks (en-US)

实验性

leftletter-spacingline-*line-breakline-heightline-height-step (en-US)

实验性

list-*list-stylelist-style-imagelist-style-positionlist-style-typemargin-*marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim (en-US)

实验性

mask-*maskmask-bordermask-border-modemask-border-outset (en-US)mask-border-repeatmask-border-slicemask-border-source (en-US)mask-border-widthmask-clip (en-US)mask-composite (en-US)mask-imagemask-modemask-origin (en-US)mask-position (en-US)mask-repeatmask-size (en-US)mask-type (en-US)masonry-auto-flow (en-US)

实验性

math-*math-depth (en-US)math-shift (en-US)

实验性

math-style (en-US)max-*max-block-size (en-US)max-heightmax-inline-sizemax-widthmin-*min-block-sizemin-heightmin-inline-sizemin-widthmix-blend-modeobject-fitobject-positionoffset-*offsetoffset-anchor (en-US)offset-distance (en-US)offset-path (en-US)offset-position (en-US)offset-rotate (en-US)opacityorderorphans (en-US)outline-*outlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflow-*overflowoverflow-anchoroverflow-blockoverflow-clip-margin (en-US)overflow-inlineoverflow-wrapoverflow-xoverflow-yoverlay (en-US)

实验性

overscroll-*overscroll-behavioroverscroll-behavior-block (en-US)overscroll-behavior-inline (en-US)overscroll-behavior-xoverscroll-behavior-ypadding-*paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-toppage-*page (en-US)page-break-afterpage-break-before (en-US)page-break-inside (en-US)paint-orderperspectiveperspective-originplace-*place-contentplace-itemsplace-self (en-US)pointer-eventspositionprint-color-adjust (en-US)quotesresizerightrotaterow-gapruby-align (en-US)

实验性

ruby-position (en-US)scalescroll-*scroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-timeline (en-US)

实验性

scroll-timeline-axis (en-US)

实验性

scroll-timeline-name (en-US)

实验性

scrollbar-*scrollbar-colorscrollbar-gutter (en-US)scrollbar-widthshape-*shape-image-thresholdshape-marginshape-outsidetab-sizetable-layouttext-*text-aligntext-align-lasttext-combine-upright (en-US)text-decorationtext-decoration-colortext-decoration-linetext-decoration-skip

实验性

text-decoration-skip-ink (en-US)text-decoration-styletext-decoration-thicknesstext-emphasis (en-US)text-emphasis-color (en-US)text-emphasis-position (en-US)text-emphasis-style (en-US)text-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjust

实验性

text-transformtext-underline-offsettext-underline-positiontext-wrap (en-US)timeline-scope (en-US)

实验性

toptouch-actiontransform-*transformtransform-boxtransform-origintransform-styletransition-*transitiontransition-behavior (en-US)transition-delaytransition-durationtransition-propertytransition-timing-functiontranslateunicode-bidiuser-modify (en-US)

非标准

已弃用

user-selectvertical-alignview-*view-timeline (en-US)

实验性

view-timeline-axis (en-US)

实验性

view-timeline-inset (en-US)

实验性

view-timeline-name (en-US)

实验性

view-transition-name

实验性

visibilitywhite-spacewhite-space-collapse (en-US)widowswidthwill-changeword-breakword-spacingwriting-modez-indexzoom (en-US)

非标准

SelectorsAttribute selectorsClass selectorsID selectors& nesting selector (en-US)Type selectorsUniversal selectors

CombinatorsChild combinatorColumn combinator

实验性

Descendant combinatorNamespace separator (en-US)Next-sibling combinatorSelector listSubsequent-sibling combinator

Pseudo-classes:-moz-broken

非标准

:-moz-drag-over

非标准

:-moz-first-node

非标准

:-moz-handler-blocked (en-US)

非标准

:-moz-handler-crashed (en-US)

非标准

:-moz-handler-disabled (en-US)

非标准

:-moz-last-node (en-US)

非标准

:-moz-loading (en-US)

非标准

:-moz-locale-dir(ltr) (en-US)

非标准

:-moz-locale-dir(rtl) (en-US)

非标准

:-moz-only-whitespace

非标准

:-moz-submit-invalid (en-US)

非标准

:-moz-suppressed (en-US)

非标准

:-moz-user-disabled (en-US)

非标准

:-moz-window-inactive

非标准

:active:any-link:autofill:blank

实验性

:buffering (en-US):checked:current (en-US):default:defined:dir():disabled:empty:enabled:first:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future (en-US):has():host:host-context():host():hover:in-range:indeterminate:invalid:is():lang():last-child:last-of-type:left:link:local-link (en-US):modal (en-US):muted (en-US):not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:past (en-US):paused:picture-in-picture:placeholder-shown:playing:popover-open (en-US):read-only:read-write:required:right:root:scope:seeking (en-US):stalled (en-US):state() (en-US)

实验性

:target:target-within (en-US)

实验性

:user-invalid (en-US):user-valid (en-US):valid:visited:volume-locked (en-US):where()

Pseudo-elements::-moz-color-swatch (en-US)

非标准

::-moz-focus-inner (en-US)

实验性

::-moz-list-bullet (en-US)

非标准

::-moz-list-number (en-US)

非标准

::-moz-page (en-US)

非标准

::-moz-page-sequence (en-US)

非标准

::-moz-progress-bar

非标准

::-moz-range-progress

非标准

::-moz-range-thumb (en-US)

非标准

::-moz-range-track (en-US)

非标准

::-moz-scrolled-page-sequence (en-US)

非标准

::-webkit-inner-spin-button (en-US)

非标准

::-webkit-meter-bar (en-US)

非标准

::-webkit-meter-even-less-good-value (en-US)

非标准

::-webkit-meter-inner-element (en-US)

非标准

::-webkit-meter-optimum-value (en-US)

非标准

::-webkit-meter-suboptimum-value (en-US)

非标准

::-webkit-progress-bar

非标准

::-webkit-progress-inner-element

非标准

::-webkit-progress-value

非标准

::-webkit-scrollbar

非标准

::-webkit-search-cancel-button (en-US)

非标准

::-webkit-search-results-button (en-US)

非标准

::-webkit-slider-runnable-track

实验性

::-webkit-slider-thumb

实验性

::after::backdrop::before::cue::cue-region (en-US)::file-selector-button::first-letter::first-line::grammar-error::highlight() (en-US)::marker::part()::placeholder::selection::slotted()::spelling-error::target-text

实验性

::view-transition

实验性

::view-transition-group

实验性

::view-transition-image-pair

实验性

::view-transition-new

实验性

::view-transition-old

实验性

At-rules@charset@color-profile (en-US)@container (en-US)@counter-style@document

非标准

已弃用

@font-face@font-feature-values@font-palette-values (en-US)@import@keyframes@layer@media@namespace@page@property@scope (en-US)@starting-style (en-US)

实验性

@supports

Functions-moz-image-rect

非标准

已弃用

abs() (en-US)acos()asin()atan()atan2()attr()calc()clamp()cos()counter()counters()cross-fade() (en-US)element()

实验性

env()exp()fit-content()hypot()log()max()min()minmax()mod() (en-US)path() (en-US)pow()ray() (en-US)rem() (en-US)repeat()round() (en-US)sign() (en-US)sin()sqrt()symbols() (en-US)tan()url()var()

Types (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US)

已弃用

指南

动画

运用 CSS 动画

背景和边框

多个背景的应用

重设背景图片的大小

盒子的对齐方式

块布局中的盒对齐方式

弹性盒布局中的盒对齐方式

网格布局中的盒模型对齐 (en-US)

多栏式布局中的盒对齐方式 (en-US)

盒模型

CSS 基本盒模型简介

外边距重叠

颜色

使用 CSS 为 HTML 元素添加颜色

Web 无障碍：理解颜色和亮度 (en-US)

Web 无障碍：色彩对比度 (en-US)

多列

多栏式布局的基础概念

多栏式布局的样式

多栏式布局中的跨列与平衡 (en-US)

处理多栏式布局的溢出

多栏式布局中的内容换行 (en-US)

条件规则

运用特性查询

Containment

Using CSS containment (en-US)

CSS 容器查询

Using container size and style queries (en-US)

CSS 对象模型视图

坐标系

弹性盒布局

弹性盒布局基础

与其他布局的比较

弹性盒容器中的对齐方式

弹性盒布局中的排序方式

控制弹性盒子元素在主轴上的比例

包装弹性盒布局中的元素

经典的弹性盒布局示例

流式布局

一般的流式布局中的块式和行式布局

应用或脱离流式布局

格式化上下文简介

流式布局和书写模式

流式布局和溢出

字体

OpenType 字体特性指南

可变字体指南

网格布局

网格布局基础概念

和其他布局方法的联系

基于网格线的定位

网格模板区域

使用命名线布局

网格布局中的自动定位

网格布局中的盒模型对齐

网格、逻辑值和书写模式

网格布局和无障碍

网格布局和渐进增强

运用网格布局实现常见布局

子网格 (en-US)

Masonry 布局 (en-US)

图片

使用 CSS 渐变

列表和计数器

使用 CSS 计数器

使列表缩进一致

逻辑属性

基础概念

浮动和定位

内外边距和边框

调整尺寸

数学函数

使用 CSS 数学函数 (en-US)

媒体查询

使用媒体查询

无障碍相关的媒体查询 (en-US)

运用编程方法测试媒体查询

Printing

嵌套样式规则

使用 CSS 嵌套 (en-US)

嵌套 @ 规则 (en-US)

嵌套与优先级 (en-US)

定位

理解 CSS z-index

滚动吸附

滚动吸附的基本概念

形状

形状概述

使用 box 值指定形状

基本形状 (en-US)

从图片中指定形状 (en-US)

文本

包装文本和文本断行 (en-US)

变换

使用变换

过渡

使用过渡

布局手册

媒体对象

多列

居中一个元素

粘性页脚

分离式导航

面包屑导航

带有图标的列表 (en-US)

分页 (en-US)

卡片

网格布局包装器 (en-US)

工具

取色器

Box shadow 生成器

图片边框生成器

圆角边框生成器

In this article什么是网格？网格容器网格轨道网格线网格单元网格区域网格间距嵌套网格使用 z-index 控制层级下一步网格布局的基本概念CSS 网格布局引入了二维网格布局系统，可用于布局页面主要的区域或小型用户界面元素。本文介绍了 CSS 网格布局与 CSS 网格布局规范第 1 版中的新术语。这篇简介中所展示的每种特性，将在本指南的其余部分中详细介绍。什么是网格？网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些列和行相关的位置上。CSS 网格布局具有以下特点：固定的位置和弹性的轨道的大小你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr 来创建有弹性尺寸的网格。网格项摆放你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。创建额外的轨道来包含内容可以通过网格布局定义显式网格。网格布局规范非常灵活，可以在需要时添加额外的行和列。包括添加“一个容器能容纳的尽可能多的列”等特性。对齐控制网格包含对齐特性，因此我们可以控制项目放入网格区域后的对齐方式，以及整个网格的对齐方式。控制重叠内容多个项目可以放置在网格单元格中，或者区域可以部分地彼此重叠。然后可以使用 z-index 属性来控制重叠区域显示的优先级。

网格布局是一个强大的规范，当与 CSS 的其他部分（如弹性盒）结合使用时，可以帮助你创建以前不可能在 CSS 中构建的布局。这一切都是通过在网格容器上创建一个网格来开始的。网格容器我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。

在这个示例中，有一个类名为 wrapper 的 div 元素作为容器，其内部有五个子元素。

html

我将 .wrapper 作为一个网格容器。

css.wrapper {

display: grid;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

所有直系子元素现在都是网格项了。在 web 浏览器中，元素转为网格项前看不出什么差异，因为网格给这些元素创建了一个单列网格。此刻，Firefox 开发者版（Developer Edition）可能会助你一臂之力。此时，你可能会发现使用 Firefox 开发工具中的网格检查器非常有用。如果你在 Firefox 中查看此示例并检查网格，会看到 grid 值旁边有一个小图标。单击该图标后，该元素上的网格就会显示到浏览器窗口中。

当你学习并且使用 CSS 网格布局时，这个工具能让你更好地了解到你的网格在视觉上发生了哪些变化。

如果我们想让这个示例更加“网格化”，我们需要使用列轨道。网格轨道我们使用 grid-template-rows 和 grid-template-columns 属性定义网格上的行和列。这些属性定义了网格轨道。网格轨道（grid track）是网格上任意两条相邻线之间的空间。下图显示了一个突出显示的轨道——这是网格中第一行的轨道。

通过使用 grid-template-columns 和 grid-template-rows 属性或简写的 grid 或 grid-template 属性，可在显式网格中定义网格轨道。在隐式网格中，也可以通过在显式网格中创建的轨道外定位网格项来创建轨道。基本示例我可以通过添加 grid-template-columns 属性将列轨道添加到之前的示例，然后定义列轨道的大小。

我现在创建了一个网格，包含了三个 200 像素宽的列轨道。子元素将在网格上每个网格单元中摆放。

html

css.wrapper {

display: grid;

grid-template-columns: 200px 200px 200px;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

fr 单位轨道可以使用任何长度单位进行定义。网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。新的 fr 单位代表网格容器中可用空间的一部分。下一个网格定义将创建三个等宽的轨道，并根据可用空间的大小进行增减。

html

css.wrapper {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

不同尺寸在下面的这个示例中，我们定义了一个 2fr 轨道和两个 1fr 轨道。可用空间被四等分。其中两份给了第一个轨道，剩下两个轨道各占一份。

html

css.wrapper {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

混合弹性尺寸和绝对尺寸在最后一个示例中，我们将绝对大小的轨道与 fr 单位混合使用。第一条轨道是 500 像素，因此从可用空间中扣除了固定宽度。剩下的空间被一分为三，并按比例分配给两个灵活的轨道。

html

css.wrapper {

display: grid;

grid-template-columns: 500px 1fr 2fr;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

在轨道列表中使用 repeat() 标记包含多个轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。如下方的网格定义：

css.wrapper {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

也可写成：

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

}

Repeat 标记可以用于重复轨道列表中的一部分。在下面的示例中我创建了一个网格，其起始轨道为 20 像素，接着重复了 6 个 1fr 的轨道，最后再添加了一个 20 像素的轨道。

css.wrapper {

display: grid;

grid-template-columns: 20px repeat(6, 1fr) 20px;

}

Repeat 标记可以传入一个轨道列表，因此你可以用它来创建一个多轨道模式的重复轨道列表。在下一个示例中，网格将有共计 10 个轨道，为 1 个 1fr 轨道后面跟着 1 个 2fr 轨道，该模式重复 5 次。

css.wrapper {

display: grid;

grid-template-columns: repeat(5, 1fr 2fr);

}

隐式和显式网格在创建示例网格时，我们使用 grid-template-columns 属性专门定义了列轨道，但网格也会自行创建行。这些行是隐式网格的一部分。而显式网格由使用 grid-template-columns 或 grid-template-rows 定义的任何行和列组成。

如果你在定义的网格外放置内容，或者由于内容太多，需要更多的网格轨道，那么网格就会在隐式网格中创建行和列。默认情况下，这些轨道会自动调整大小，因此它们的大小取决于轨道内的内容。

你还可以使用 grid-auto-rows 和 grid-auto-columns 属性为在隐式网格中创建的轨道定义设定大小。

在下面的示例中我们用 grid-auto-rows 属性来确保在隐式网格中创建的轨道是 200 像素高。

html

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 200px;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

轨道大小和 minmax在设置显式网格或定义自动创建的行或列的大小时，我们可能希望给轨迹一个最小尺寸，但也要确保它们能扩展以适应添加的任何内容。例如，我可能希望我的行永远不会缩小到 100 像素以下，但如果我的内容高度扩展到 300 像素，那么我希望行也能扩展到这个高度。

网格布局提供了 minmax() 函数来解决这个问题。在下一个示例中，我在 grid-auto-rows 的值中使用了 minmax()。这意味着自动创建的行高度最小为 100 像素，最大为 auto。使用 auto 表示大小将取决于内容的大小，并将拉伸以在该行中为单元格中最高的项目留出空间。

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: minmax(100px, auto);

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

html

网格线应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。网格布局会为我们创建编号的网格线来让我们来定位每一个网格元素。例如下面这个三列两行的网格中，就拥有四条纵向的网格线。

网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。网格线也可以被命名，我们将在稍后的教程中看到如何完成这一操作。跨轨道放置网格项目我们将在以后的文章中详细探讨基于行的放置。下面的示例以简单的方式演示了这一点。放置项目时，我们的目标是网格线而不是网格轨道。

在下面的示例中，我使用 grid-column-start (en-US)、grid-column-end (en-US)、grid-row-start (en-US) 和 grid-row-end (en-US) 属性，将前两个项目放置在三列轨道网格上。从左到右，第一个项目放置在第 1 列，并跨越到第 4 列，在我们的示例中，第 4 列是网格的最右边一行。它开始于第 1 行，结束于第 3 行，因此跨越了两条行轨。

第二个项目从网格列第 1 行开始，跨越一个轨道。这是默认设置，因此我不需要指定终止行。它还跨越了从第 3 行到第 5 行的两条行轨道。其他项目将放置在网格的空白处。

html

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 100px;

}

.box1 {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 3;

}

.box2 {

grid-column-start: 1;

grid-row-start: 3;

grid-row-end: 5;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

备注： 别忘了你可以使用 Firefox 开发者工具中的网格检查器查看这些元素是如何被摆放在网格中的。

网格线定位简写对于列，可以使用 grid-column 将上面使用的完整值压缩到一行，对于行，可以使用 grid-row 将其压缩到一行。下面的示例将提供与前面代码相同的定位，但 CSS 内容要少得多。斜线字符（/）前面的值为起始网格线，斜线字符（/）后面的值为终止网格线。

如果网格项只跨越了一个轨道，可以省略终止值。

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 100px;

}

.box1 {

grid-column: 1 / 4;

grid-row: 1 / 3;

}

.box2 {

grid-column: 1;

grid-row: 3 / 5;

}

网格单元网格单元（grid cell）是网格项中最小的单位，从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子，一旦一个网格元素被定义在一个父级元素当中，那么它的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。

网格区域项目可以按行或列跨越一个或多个单元格，这样就形成了一个网格区域（grid area）。网格区域必须是矩形的（例如不能创建 L 形区域）。突出显示的网格区域跨越了两条行轨道和两条列轨道。

网格间距网格单元格之间的横向间距（gutter）或纵向间距（alley）可以使用 column-gap 和 row-gap 属性或简写 gap 来创建。在下面的示例中，我在列与列之间创建了 10 像素的间隙，在行与行之间创建了 1em 的间隙。

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

column-gap: 10px;

row-gap: 1em;

}

备注： 当网格布局首次在浏览器中使用时，column-gap、row-gap 和 gap 都带有 grid- 前缀，分别称为 grid-column-gap、grid-row-gap 和 grid-gap。现在，所有浏览器都支持无前缀值，但前缀版本将作为别名保留，以便安全使用。

html

* {

box-sizing: border-box;

}

.wrapper {

column-gap: 10px;

row-gap: 1em;

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.wrapper > div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

网格间距使用的任何空间都会在分配给灵活长度的 fr 轨道之前计算在内，而且网格间距的大小与常规网格轨道相同，但不能在间距中放置任何东西。就基于行的定位而言，网格间距就像一条粗线。嵌套网格网格项可以也成为一个网格容器。在下面的示例中，我使用了之前创建的三栏网格，并放置了两个项目。在本例中，第一个项目有一些子项目。由于这些项目不是网格的直接子项，它们不参与网格布局，因此显示在正常的文档流中。

不使用子网格的嵌套如果我将 box1 设置为 display: grid，我就可以给它一个轨道定义，它也会变成一个网格项。然后，项目就会排列在这个新网格上。

css.box1 {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 3;

display: grid;

grid-template-columns: repeat(3, 1fr);

}

css* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

gap: 3px;

background-color: #fff4e6;

display: grid;

grid-template-columns: repeat(3, 1fr);

}

.box {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

.box1 {

grid-column: 1 / 4;

}

.nested {

border: 2px solid #ffec99;

border-radius: 5px;

background-color: #fff9db;

padding: 1em;

}

在这种情况下，嵌套网格与父网格没有任何关系。正如你在示例中看到的，它没有继承父网格的 gap，嵌套网格中的行也没有与父网格中的行对齐。子网格除了常规网格外，子网格（subgrid）还能让我们创建嵌套网格，使用父网格的轨道定义。

要使用它们，我们可以编辑上述嵌套网格示例，将 grid-template-columns: repeat(3,1fr) 的轨道定义更改为 grid-template-columns: subgrid。嵌套网格就会沿用父网格轨道来布局项目。

css.box1 {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 3;

display: grid;

grid-template-columns: subgrid;

}

使用 z-index 控制层级网格项可以占据同一单元格，在这种情况下，我们可以使用 z-index 属性来控制重叠项的堆叠顺序。不使用 z-index 的重叠如果我们回到按行号定位项目的示例，就可以改变这种方法，使两个项目重叠。

html

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 100px;

}

.box1 {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 3;

}

.box2 {

grid-column-start: 1;

grid-row-start: 2;

grid-row-end: 4;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.box {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

网格项目 box2 现在覆盖于 box1 之上，因为它在源文件顺序中排在后面。控制顺序我们可以在网格项目发生重叠时使用 z-index 属性控制重叠的顺序——就像放置网格项目一样。如果我们给 box2 设定一个低于 box1 的 z-index 值的话，box2 将会显示在 box1 的下方。

css.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 100px;

}

.box1 {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 3;

z-index: 2;

}

.box2 {

grid-column-start: 1;

grid-row-start: 2;

grid-row-end: 4;

z-index: 1;

}

* {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

}

.box {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

下一步在本文中，我们快速了解了网格布局的各种可能性。探索并玩转代码示例，然后进入本指南的下一部分，在这里我们将真正开始挖掘 CSS 网格布局的细节。Help improve MDNWas this page helpful to you?YesNoLearn how to contribute.This page was last modified on 2023年12月10日 by MDN contributors.View this page on GitHub• Report a problem with this contentMDN logoYour blueprint for a better internet.MDN on MastodonMDN on X (formerly Twitter)MDN on GitHubMDN Blog RSS FeedMDNAboutBlogCareersAdvertise with usSupportProduct helpReport an issueOur communitiesMDN CommunityMDN ForumMDN ChatDevelopersWeb TechnologiesLearn Web DevelopmentMDN PlusHacks BlogMozilla logoWebsite Privacy NoticeCookiesLegalCommunity Participation GuidelinesVisit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a Creative Commons licen

grid是什么意思_grid的翻译_音标_读音_用法_例句_爱词霸在线词典

css grid 属性 | 菜鸟教程

css grid 属性 | 菜鸟教程

菜鸟教程 -- 学的不仅是技术，更是梦想！

首页

HTML

CSS

JavaScript

Vue

Bootstrap

NodeJS

Python3

Python2

Java

C

C++

C#

Go

SQL

Linux

jQuery

本地书签

首页

HTML

CSS

JS

本地书签

Search

Python3 教程

Python2 教程

Vue3 教程

vue2 教程

Bootstrap3 教程

Bootstrap4 教程

Bootstrap5 教程

Bootstrap2 教程

CSS 参考手册

CSS 参考手册

CSS 选择器

CSS 听觉参考手册

CSS Web安全字体

CSS 动画

CSS 函数

CSS 单位

CSS 颜色

CSS 合法颜色值

CSS 颜色名称

CSS 颜色十六进制值

CSS 浏览器支持

Sass 教程

CSS 属性

align-content

align-items

align-self

all

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

appearance

backface-visibility

background

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-repeat

background-size

border

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom

box-align

box-direction

box-flex

box-flex-group

box-lines

box-ordinal-group

box-orient

box-pack

box-shadow

box-sizing

caption-side

clear

clip

color

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

content

counter-increment

counter-reset

cursor

direction

display

empty-cells

filter

flex

flex-basis

flex-direction

flex-flow

flex-grow

flex-shrink

flex-wrap

float

font

@font-face

font-family

font-size

font-size-adjust

font-stretch

font-style

font-variant

font-weight

@import

grid-rows

hanging-punctuation

height

icon

justify-content

@keyframes

left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

@media

min-height

min-width

mix-blend-mode

object-fit

object-position

nav-down

nav-index

nav-left

nav-right

nav-up

opacity

order

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-x

overflow-y

padding

padding-bottom

padding-left

padding-right

padding-top

page-break-after

page-break-before

page-break-inside

perspective

perspective-origin

position

punctuation-trim

quotes

resize

right

rotation

tab-size

table-layout

target

target-name

target-new

target-position

text-align

text-align-last

text-decoration

text-decoration-color

text-decoration-line

text-decoration-style

text-indent

text-justify

text-outline

text-overflow

text-shadow

text-transform

text-wrap

top

transform

transform-origin

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

unicode-bidi

vertical-align

visibility

white-space

width

word-break

word-spacing

word-wrap

z-index

writing-mode

gird

gap

row-gap

grid-area

grid-auto-columns

grid-auto-rows

grid-auto-flow

grid-column

grid-column-start

grid-column-end

grid-column-gap

grid-gap

grid-row-gap

grid-row-end

grid-row-start

grid-template

grid-template-areas

grid-template-columns

grid-template-rows

grid-row

@charset

clip-path

pointer-events

backdrop-filte

CSS object-position 属性

CSS gap 属性

CSS grid 属性

实例

制作一个三列网格布局，并设置第一行高度为 160 像素：

.grid-container {

display: grid;

grid: 160px / auto auto auto;

}

尝试一下 »

标签定义及使用说明

grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：

显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。

隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。

间距属性： grid-column-gap 和 grid-row-gap。

默认值:

none none none auto auto row

继承:

no

动画:

支持, 查看独立属性。 阅读 animatable

尝试一下

Version:

CSS 网格布局模块级别 1

JavaScript 语法:

object.style.grid="250px / auto auto auto"

尝试一下

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性

grid

57

16

52

10

44

属性值

值

描述

none

默认值。不定义行或列的尺寸。

grid-template-rows / grid-template-columns

设置列和行的尺寸。

grid-template-areas

指定网格布局使用的网格项名称

grid-template-rows / grid-auto-columns

指定行的尺寸（高度），以及列的自动尺寸。

grid-auto-rows / grid-template-columns

指定行的自动尺寸，并设置 grid-template-columns 属性。

grid-template-rows / grid-auto-flow grid-auto-columns

指定行的尺寸（高度），以及自动布局算法怎样运作，和列的自动尺寸。

grid-auto-flow grid-auto-rows / grid-template-columns

指定自动布局算法怎样运作，和行的自动尺寸，以及设置 grid-template-columns 属性。

initial

属性设置为默认值

阅读 initial

inherit

从父原生继承该属性，

阅读 inherit

在线实例

实例

设置两行，item1 跨越前两行中的前两列：

.item1 {

grid-area: myArea;

}

.grid-container {

display: grid;

grid:

'myArea myArea . . .'

'myArea myArea . . .';

}

尝试一下 »

实例

命名所有项目，制作一个随时可用的网页模板：：

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }

.grid-container {

display: grid;

grid:

'header header header header header'

'menu main main main right right'

'menu footer footer footer footer';

}

尝试一下 »

更多内容

CSS 教程: CSS 网格容器

CSS 参考手册: grid-template-areas 属性

CSS 参考手册: grid-template-rows 属性

CSS 参考手册: grid-template-columns 属性

CSS 参考手册: grid-auto-rows 属性

CSS 参考手册: grid-auto-columns 属性

CSS 参考手册: grid-auto-flow 属性

CSS 参考手册: grid-row-gap 属性

CSS 参考手册: grid-column-gap 属性

CSS object-position 属性

CSS gap 属性

点我分享笔记

取消

分享笔记

昵称昵称 (必填)

邮箱邮箱 (必填)

引用地址引用地址

分类导航

HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程FastAPI 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质

Advertisement

反馈/建议

在线实例

·HTML 实例

·CSS 实例

·JavaScript 实例

·Ajax 实例

·jQuery 实例

·XML 实例

·Java 实例

字符集&工具

· HTML 字符集设置

· HTML ASCII 字符集

· JS 混淆/加密

· PNG/JPEG 图片压缩

· HTML 拾色器

· JSON 格式化工具

· 随机数生成器

最新更新

·

Rust 宏

·

Seaborn 教程

·

Pandas 相关性分析

·

31.2k star, 免...

·

Dev Home —...

·

免费开源的 AI ...

·

11.2k star, 免...

站点信息

·

意见反馈

·

免责声明

·

关于我们

·

文章归档

关注微信

Copyright © 2013-2024 菜鸟教程 

runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1

微信关注

网格 - 学习 Web 开发 | MDN

上一页

概述：CSS layout

CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。

前提：

HTML 基础 (学习

HTML 简介)，以及了解 CSS 如何工作的 (学习

CSS 简介和盒子样式。)

目标：

要了解网格布局系统背后的基本概念，以及如何在一个网页上实现一个网格布局。

什么是网格布局？网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

备注： 任何有设计背景的人似乎都感到惊讶，CSS 没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。

在 CSS 中创建自己的网格决定好你的设计所需要的网格后，你可以创建一个 CSS 网格版面并放入各类元素。我们先来看看网格的基础功能，然后尝试做一个简单的网格系统。

下面这个视频提供了一个很好的解释：定义一个网格和往常一样，你可以下载，然后在文本编辑器中打开并浏览教程的起始文件（你可以在这里查看实时的效果）。你会看到一个带有容器的示例，容器中有一些子项。默认情况下，子项按照正常布局流自顶而下排布。在这篇教程的第一部分，我们会从这开始，通过对这个文件做一些改变，来了解网格是如何工作的。

首先，我们通过把容器的 display 属性设置为 grid ,来定义一个网格。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的 css 规则加到你的文件中。

css.container {

display: grid;

}

与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为 display: grid 的声明只创建了一个只有一列的网格，所以子项还是会像正常布局流那样，自上而下、一个接一个的排布。

为了让我们的容器看起来更像一个网格，我们要给刚定义的网格加一些列。那就让我们加三个宽度为200px的列。当然，这里可以用任何长度单位，包括百分比。

css.container {

display: grid;

grid-template-columns: 200px 200px 200px;

}

在你的 CSS 中加入第二个规则。刷新页面后，你会看到子项们排进了新定义的网格中。

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container > div {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

.container {

display: grid;

grid-template-columns: 200px 200px 200px;

}

使用 fr 单位的灵活网格除了长度和百分比，我们也可以用 fr 这个单位来灵活地定义网格的行与列的大小。这个单位代表网格容器中可用空间的一份，可能有点抽象，看看下面的例子吧。

使用下面的规则来修改你的网格轨道，创建 3 个宽度为 1fr 的列：

css.container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

将窗口调窄（由于示例中设定了max-width，可能需要很窄），你应该能看到每一列的宽度可以会随着可用空间变小而变小。fr 单位按比例划分了可用空间，如果没有理解，可以试着改一下数值，看看会发生什么，比如下面的代码：

css.container {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

}

这个定义里，第一列被分配了 2fr 可用空间，余下的两列各被分配了 1fr 的可用空间，这会使得第一列的宽度更大。另外，fr可以与一般的长度单位混合使用。比如设置 grid-template-columns: 300px 2fr 1fr，那么第一列宽度是300px，剩下的两列会根据剩余的可用空间按比例分配。

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

}

.container > div {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

备注： fr单位分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。

网格间隙使用 grid-column-gap (en-US) 属性来定义列间隙；使用 grid-row-gap (en-US) 来定义行间隙；使用 grid-gap (en-US) 可以同时设定两者。

.container {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

grid-gap: 20px;

}

间隙距离可以用任何长度单位包括百分比来表示，但不能使用fr单位。

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

grid-gap: 20px;

}

.container > div {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

备注： gap属性曾经有一个grid-前缀，不过后来的标准进行了修改，目的是让他们能够在不同的布局方法中都能起作用。尽管现在这个前缀不会影响语义，但为了代码的健壮性，你可以把两个属性都写上。

css.container {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

grid-gap: 20px;

gap: 20px;

}

重复构建轨道组你可以使用repeat来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。

css.container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;

}

和之前一样，你仍然得到了 3 个 1fr 的列。第一个传入 repeat 函数的值（3）表明了后续列宽的配置要重复多少次，而第二个值（1fr）表示需要重复的构建配置，这个配置可以具有多个长度设定。例如repeat(2, 2fr 1fr)，如果你仍然不明白，可以实际测试一下效果，这相当于填入了 2fr 1fr 2fr 1fr。显式网格与隐式网格到目前为止，我们定义过了列，但还没有管过行。但在这之前，我们要来理解一下显式网格和隐式网格。显式网格是我们用 grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的 main 和 cross 轴的关系有些类似。

隐式网格中生成的行/列大小是参数默认是 auto ，大小会根据放入的内容自动调整。当然，你也可以使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格轨道的大小。下面的例子将grid-auto-rows设为了100px，然后你可以看到那些隐式网格中的行（因为这个例子里没有设定grid-template-rows，因此，所有行都位于隐式网格内）现在都是 100 像素高了。

译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container > div {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

css.container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: 100px;

grid-gap: 20px;

}

minmax() 函数100 像素高的轨道有时可能会不够用，因为时常会有比 100 像素高的内容加进去。所以，我们可以将其设定为至少 100 像素，并且能够跟随内容来自动拓展尺寸，从而保证能容纳所有内容。显而易见，你很难知道网页上某个元素的尺寸在不同情况下会变成多少，一些额外的内容或者更大的字号就会导致许多能做到像素级精准的设计出现问题。所以，我们有了minmax()函数。

minmax() 函数为一个行/列的尺寸设置了取值范围。比如设定为 minmax(100px, auto)，那么尺寸就至少为 100 像素，并且如果内容尺寸大于 100 像素则会根据内容自动调整。在这里试一下把 grid-auto-rows 属性设置为minmax函数。

css.container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-auto-rows: minmax(100px, auto);

grid-gap: 20px;

}

如果所有网格内的内容均小于 100 像素，看起来不会有变化。但如果在某一项中放入很长的内容或者图片，你可以看到这个格子所在的哪一行的高度变成能刚好容纳内容的高度了。注意我们修改的是 grid-auto-rows，因此只会作用于隐式网格。当然，这一项属性也可以应用于显式网格，更多内容可以参考 minmax() 页面。自动使用多列填充现在来试试把学到的关于网格的一切，包括 repeat 与 minmax 函数，组合起来，来实现一个非常有用的功能。某些情况下，我们需要让网格自动创建很多列来填满整个容器。通过设置grid-template-columns属性，我们可以实现这个效果，不过这一次我们会用到 repeat() 函数中的一个关键字auto-fill来替代确定的重复次数。而函数的第二个参数，我们使用minmax()函数来设定一个行/列的最小值，以及最大值 1fr。

在你的文件中试试看，你也许可以用到以下的代码。

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container > div {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

css.container {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

grid-auto-rows: minmax(100px, auto);

grid-gap: 20px;

}

你应该能看到形成了一个包含了许多至少 200 像素宽的列的网格，将容器填满。随着容器宽度的改变，网格会自动根据容器宽度进行调整，每一列的宽度总是大于 200 像素，并且容器总会被列填满。（This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.）基于线的元素放置在定义完了网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。

我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。

grid-column-start (en-US)

grid-column-end (en-US)

grid-row-start (en-US)

grid-row-end (en-US)

这些属性的值均为分隔线序号，你也可以用以下缩写形式来同时指定开始与结束的线。

grid-column

grid-row

注意开始与结束的线的序号要使用/符号分开。

下载这个文件（或者查看在线预览）。文件中已经定义了一个网格以及一篇简单的文章位于网格之外。你可以看到元素已经被自动放置到了我们创建的网格中。

接下来，尝试用定义网格线的方法将所有元素放置到网格中。将以下规则加入到你的 css 的末尾：

cssheader {

grid-column: 1 / 3;

grid-row: 1;

}

article {

grid-column: 2;

grid-row: 2;

}

aside {

grid-column: 1;

grid-row: 2;

}

footer {

grid-column: 1 / 3;

grid-row: 3;

}

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container {

display: grid;

grid-template-columns: 1fr 3fr;

grid-gap: 20px;

}

header {

grid-column: 1 / 3;

grid-row: 1;

}

article {

grid-column: 2;

grid-row: 2;

}

aside {

grid-column: 1;

grid-row: 2;

}

footer {

grid-column: 1 / 3;

grid-row: 3;

}

header,

footer {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

aside {

border-right: 1px solid #999;

}

备注： 你也可以用 -1 来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于隐式网格-1不一定能定位到最后一条分隔线。

使用 grid-template-areas 属性放置元素另一种往网格放元素的方式是用grid-template-areas属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。

将之前基于线的元素放置代码删除（或者重新下载一份新的文件），然后加入以下 CSS 规则：

css.container {

display: grid;

grid-template-areas:

"header header"

"sidebar content"

"footer footer";

grid-template-columns: 1fr 3fr;

gap: 20px;

}

header {

grid-area: header;

}

article {

grid-area: content;

}

aside {

grid-area: sidebar;

}

footer {

grid-area: footer;

}

刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

header,

footer {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

aside {

border-right: 1px solid #999;

}

grid-template-areas属性的使用规则如下：

你需要填满网格的每个格子

对于某个横跨多个格子的元素，重复写上那个元素grid-area属性定义的区域名字

所有名字只能出现在一个连续的区域，不能在不同的位置出现

一个连续的区域必须是一个矩形

使用.符号，让一个格子留空

你可以在文件中尽情发挥你的想象来测试各种网格排版，比如把页脚放在内容之下，或者把侧边栏一直延伸到最底。这种直观的元素放置方式很棒，你在 CSS 中看到的就是实际会出现的排版效果。一个用 CSS 网格实现的网格排版框架网格排版框架一般由 12 到 16 列的网格构成，你可以用 CSS 网格系统直接实现而不需要任何第三方的工具，毕竟这是标准定义好了的。

下载这个初始文件，文件中包含了一个定义了 12 列网格的容器。文件中的一些内容我们曾在前两个示例中使用过，我们暂时可以先用基于线的元素放置模式来将我们的内容放到这个 12 列的网格中。

cssheader {

grid-column: 1 / 13;

grid-row: 1;

}

article {

grid-column: 4 / 13;

grid-row: 2;

}

aside {

grid-column: 1 / 4;

grid-row: 2;

}

footer {

grid-column: 1 / 13;

grid-row: 3;

}

body {

width: 90%;

max-width: 900px;

margin: 2em auto;

font:

0.9em/1.2 Arial,

Helvetica,

sans-serif;

}

.container {

display: grid;

grid-template-columns: repeat(12, minmax(0, 1fr));

gap: 20px;

}

header,

footer {

border-radius: 5px;

padding: 10px;

background-color: rgb(207, 232, 220);

border: 2px solid rgb(79, 185, 227);

}

aside {

border-right: 1px solid #999;

}

你可以使用Firefox Grid Inspector (en-US)去查看页面中的网格线，你应该能看到这 12 列的网格是如何工作的。

技能测试！你已经读完了这篇教程，那你记住那些最重要的内容了么？在继续之前，你可以通过一些其他测试来验证你是否真正学习到了这些知识，参见技能测试：网格。小结我们在这篇文章中接触了 CSS 网格版面的主要特性，你现在应该可以在你自己的设计中使用了。想深入了解这些内容，你可以读一读下面关于网格版面的文章，可以下面的推荐阅读里看到。推荐阅读

CSS 网格指南

CSS 网格检查器：检查的你的网格版面 (en-US)

上一页

概述：CSS layout

下一页

Help improve MDNWas this page helpful to you?YesNoLearn how to contribute.This page was last modified on 2023年11月30日 by MDN contributors.View this page on GitHub• Report a problem with this contentMDN logoYour blueprint for a better internet.MDN on MastodonMDN on X (formerly Twitter)MDN on GitHubMDN Blog RSS FeedMDNAboutBlogCareersAdvertise with usSupportProduct helpReport an issueOur communitiesMDN CommunityMDN ForumMDN ChatDevelopersWeb TechnologiesLearn Web DevelopmentMDN PlusHacks BlogMozilla logoWebsite Privacy NoticeCookiesLegalCommunity Participation GuidelinesVisit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a Creative Commons licen