本文详细介绍了CSSGrid布局的各种属性，如display、grid-template-rows/columns、repeat(auto-fit)、minmax、fr单位等，展示了如何实现响应式布局和解决空隙问题。同时，提到了兼容性和网友对于Grid布局的看法。
Grid布局是一种用于网页布局的CSS技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素。
这是一个强大的布局方式，可以看作是二维布局，也是唯一的二维布局方案。
容器属性
display 属性
通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。
display：grid：该容器是一个块级元素display: inline-grid：容器元素为行内元素
<div class="wrapper">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div>
</div>
<style>
.wrapper {
display: grid;
}
</style>
grid-template-columns 和 grid-template-rows 属性
grid-template-columns：设置列宽grid-template-rows：设置行高
.wrapper {
display: grid;
gap: 5px;
/* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
/* 声明了两行，行高分别为 50px 50px */
grid-template-rows: 50px 50px;
}
- repeat()
可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的.wrapper { display: grid; gap: 5px; grid-template-columns: 200px 100px 200px; /* 2行，而且行高都为 50px */ grid-template-rows: repeat(2, 50px); }
.
-
auto-fill
表示自动填充，多少列(行)自适应，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px)表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：.wrapper-2 { display: grid; gap: 5px; /* 列宽200px 多少列自适应 */ grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: 50px 50px; }
. -
fr
fr 单位代表网格容器中可用空间的一等份。
grid-template-columns: 200px 1fr 2fr表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示：.wrapper { display: grid; gap: 5px; /* 第一个列宽设置为 200px，后面列宽分别为剩余宽度的 1/3 和 2/3 */ grid-template-columns: 200px 1fr 2fr; grid-template-rows: 50px 50px; }
. -
minmax()
minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：.wrapper { display: grid; gap: 5px; /* 第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍 */ grid-template-columns: 1fr 1fr minmax(300px, 2fr); grid-template-rows: 50px 50px; }
. -
auto
通过 auto 关键字，我们可以轻易实现三列或者两列布局。
grid-template-columns: 100px auto 100px表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下：.wrapper { display: grid; gap: 5px; /* 第一第三列为 100px，中间自适应 */ grid-template-columns: 100px auto 100px; grid-template-rows: 50px 50px; }
row-gap、column-gap、gap 属性
row-gap：设置行间距column-gap：设置列间距gap：是两者的简写形式
grid-row-gap、grid-column-gap、grid-gap 属性已被废弃，建议使用新的、未被废弃的属性row-gap、column-gap、gap。
这些属性是在CSS Grid规范拟定早期加入的，用于设置网格布局中行与行之间、列与列之间以及行和列之间的间距。然而，随着gap属性在CSS3新特性中的普及，这些旧的grid-*属性被逐渐废弃。
.wrapper {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-template-rows: 50px 50px 50px;
/* 行间距是10px */
row-gap: 10px;
/* 列间距是20px */
column-gap: 20px;
/* 简写： 行间距是10px 列间距是20px */
gap: 10px 20px;
}
grid-template-areas 属性
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成
一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。
grid-area 属性指定项目放在哪一个区域
.wrapper {
display: grid;
gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas:
". header header"
"sidebar content content";
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。
header元素会占据第一行的两个连续区域，aside元素会占据第二行的第一个区域，而两个content 元素会占据第二行的后两个区域。
grid-auto-flow 属性
grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
-
grid-auto-flow: row：放置顺序是"先行后列"，即先填满第一行，再开始放入第二行（默认值是 row）.wrapper { display: grid; gap: 5px; grid-template-columns: 100px 200px 100px; grid-auto-rows: 50px; grid-auto-flow: row; }
-
grid-auto-flow: column：放置顺序是"先列后行"，即先填满第一列，再开始放入第二列.wrapper { display: grid; gap: 5px; grid-auto-columns: 100px; grid-template-rows: 50px 50px; grid-auto-flow: column; }
justify-items、align-items、place-items 属性
作用的是每个单元格item
justify-items：每个单元格的水平位置（左中右）align-items：每个单元格的垂直位置（上中下）place-items：是两者的简写形式
.wrapper {
display: grid;
gap: 5px;
grid-template-columns: 100px 200px 100px;
grid-auto-rows: 50px;
justify-items: start;
}
它们都有四个值：start | end | center | stretch
- stretch：拉伸，占满单元格的整个宽度（默认值）
-
start：对齐单元格的起始边缘
-
end：对齐单元格的结束边缘
-
center：单元格内部居中
justify-content、align-content、place-content 属性
作用的是整个内容区域content
justify-content：是整个内容区域在容器里面的水平位置（左中右）align-content：是整个内容区域在容器里面的垂直位置（上中下）
.wrapper {
display: grid;
gap: 5px;
grid-template-columns: 100px 200px 100px;
grid-auto-rows: 50px;
justify-content: start;
}
它们都有七个值：start | end | center | stretch | space-around | space-between | space-evenly
start：对齐容器的起始边框end：对齐容器的结束边框center：容器内部居中
.
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔stretch：项目大小没有指定时，拉伸占据整个网格容器
grid-auto-columns、grid-auto-rows 属性
仅影响那些未明确设置大小的列(行)
grid-auto-columns：设置网格容器中列的默认大小- g
rid-auto-rows：设置网格容器中行的默认大小
该属性的语法允许使用多种值：
auto：默认值，由容器的大小决定列的尺寸max-content：根据列中最大的网格元素设置每列的大小min-content：根据列中最小的网格元素设置每列的大小length：使用自定义的长度值设置列的大小
.wrapper {
display: grid;
gap: 10px;
grid-template-columns: 200px 100px;
/* 只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;
}
- 显式网格：这里
grid-template-columns和grid-template-rows属性只是指定了两行两列，也就是4个元素的显式网格。 - 隐式网格：但实际有九个元素，剩下的4个元素就是隐式网格。通过
grid-auto-rows可以指定隐式网格的行高为50px
如下图所示：
在早期的CSS Grid规范中，当网格容器的内容超出了显式定义的网格线时，会创建隐式网格。
然而，隐式网格的某些行为可能会导致布局的不确定性，因此现在更推荐使用显式定义网格线的方式来避免这些问题。
项目属性
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);
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: 3;
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类似
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
.wrapper {
margin: 50px;
display: grid;
gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas:
". header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
justify-self、align-self、place-self 属性
与justify-items、align-items、place-items属性的用法完全一致，但只作用于单个项目
justify-self：设置单元格内容的水平位置（左中右）align-self：设置单元格内容的垂直位置（上中下）place-self：是两者的简写形式
它们有同样的四个值：start | end | center | stretch
.item {
justify-self: start;
}
.item-1 {
justify-self: end;
}
.item-2 {
justify-self: center;
}
.item-3 {
justify-self: stretch;
}
-
stretch：拉伸，占满单元格的整个宽度（默认值）
-
start：对齐单元格的起始边缘
-
end：对齐单元格的结束边缘
-
center：单元格内部居中
Grid 实战
fr 实现等分响应式
fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。
grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分
.wrapper {
display: grid;
gap: 10px 20px;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px;
}
等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现：flex: 1，
repeat + auto-fit——固定列宽，改变列数量
网格能够固定列宽，并根据容器的宽度来改变列的数量。
这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。
grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：
.wrapper {
display: grid;
gap: 10px 20px;
/* 固定列宽为 200px，数量是自适应的 */
grid-template-columns: repeat(auto-fit, 200px);
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 {
display: grid;
gap: 10px 20px;
/* 每列的数量是自适应的；列宽至少是200px，如果还有空余则一起等分 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 50px;
}
repeat+auto-fit+minmax-span-dense 解决空缺问题
如果每个网格元素的长度不相同，则通过 span 关键字进行设置网格项目的跨度
grid-column-start: span 3，表示这个网格项目跨度为 3。
.four {
grid-column-start: span 3;
}
怎么右侧又有空白了？原来是有一些长度太长了，放不下。
这个时候就到我们的 dense 关键字 出场了。
grid-auto-flow: row dense 表示尽可能填充，而不留空白
.wrapper {
display: grid;
gap: 10px 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 50px;
grid-auto-flow: row dense;
}
网友评价
-
张鑫旭：强虽然强，但是学起来累啊，我并不看好日后的普及。
-
强大并不意味着实用，还是要考虑实际情况
-
Grid兼容性低于flex，不兼容ie
链接：最强大的 CSS 布局 —— Grid 布局 https://juejin.cn/post/6854573220306255880
扫一扫
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
