Grid布局
Grid布局即网格布局，将网页分成一个个的网格，然后通过这些网格进行组合，做出各种各样的布局。首先看看兼容性：
Grid布局 VS Flex布局
Grid布局与flex布局只是看起来差不多，其实有着本质的区别。Grid是二维布局，而flex是一维布局。flex布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
但是Grid有个很大的问题就是兼容性不太好，不兼容ie。
DEMO:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局</title>
<style>
.container {
display: grid;
/* fr 占满剩余的部分 */
grid-template-columns: repeat(3, 1fr);
/* 行间距和列间距都为20px */
grid-gap: 20px;
/* grid-auto-rows属性为网格容器中的行设置大小 */
/* 表示不小于100px,最大值为自适应 */
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 2;
grid-row: 1;
background: #19CAAD;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
background: #8CC7B5;
}
.three {
grid-row: 2 / 5;
grid-column: 1;
background: #D1BA74;
}
.four {
grid-column: 3;
grid-row: 3;
background: #BEE7E9;
}
.five {
grid-column: 2;
grid-row: 3/5;
background: #E6CEAC;
}
.six {
grid-column: 3;
grid-row: 4;
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
.seven {
background: #DD98B2;
}
.eight {
background: #ABE3B7;
}
.nine {
background: #BFB540;
}
</style>
</head>
<body>
<div class="container">
<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 class="seven item">Seven</div>
<div class="eight item">Eight</div>
<div class="nine item">Nine</div>
</div>
</body>
<script>
</script>
</html>
效果图：
容器和项目：我们通过在元素上声明 display：grid(块级元素) 或 display：inline-grid(行内块元素) 来创建一个网格容器。容器内的子元素就变成了一个个网格项目。
网络轨道:grid-template-columns和grid-template-row属性来定义网格中的行和列。
网格单元:容器内的子元素都是一个个网格单元。
repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
fr 关键字:为了方便表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。fr 是一个自适应单位，被用于在一系列长度值中分配剩余空间，剩下的空间根据各自的数字按比例分配。
auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。所以当浏览器宽度变化时，网格项目的位置也
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 5px;
grid-auto-rows: 50px;
}
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
/* 表示列宽不小于100px，不大于1fr */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
auto 关键字
auto关键字表示由浏览器自己决定长度。
/* 第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度 */
grid-template-columns: 100px auto 100px;
网格线的名称
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];
}
网格布局允许同一根线有多个名字，比如[six r6]。
容器属性(可理解为父元素属性)
grid-row-gap ， grid-column-gap ， grid-gap
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
.wrapper {
margin: 60px;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度 以及有几列 */
grid-template-columns: repeat(3, 200px);
/* 声明行间距和列间距 */
grid-gap: 20px;
/* 声明行的高度 */
grid-template-rows: repeat(3,200px);
line-height: 200px;
}
grid-template-areas 属性
网格布局允许指定区域，一个区域由单个或者多个单元格组成。
.container{
display:gird;
/*三行三列的网格布局，行高和列宽都是100px*/
grid-template-columns:100px 100px 100px;
grid-template-columns:100px 100px 100px;
/*a-i九个区域，分别对应九个单元格*/
grid-template-areas:'a b c'
'd e f'
'g h i'
}
还可以将多个单元格合并为一个区域
grid-template-areas:' one one one '
' two two two '
' three three three '
/*实例*/
grid-template-areas: 'one one one'
'four four six'
'nine nine nine';
/*对应的单元格中配置*/
.one{
grid-area:one /*相当于区域的命名*/
}
...
如果有些区域不需要使用，可以用“点”表示
/*中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域*/
grid-template-areas: 'one . three'
'four five .'
'seven . nine';
grid-auto-flow属性
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
默认是先行后列，即横着填满第一行，再填第二行。
将grid-auto-flow设置为columns，就会变成先列后行。
grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
如图，右上角空了一格,设置row dense自动填充
grid-auto-flow: row dense;
grid-auto-flow: columns dense;
justify-items 属性， align-items 属性， place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。这里的属性就和flex很相似了。
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
.container{
align-items:start
}
place-items属性是align-items属性和justify-items属性的合并简写形式。
.container{
place-items:center;
/* 也可以不相同*/
/* place-items:<align-items> <justify-items>; */
/* place-items:start,cneter; */
}
justify-content 属性， align-content 属性， place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
这些属性与flex布局的justify-content属性、align-content属性基本相同
可设置的值有：
start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
同上，place-content也是前两者的合并简写形式
.container{
justify-content:center;
}
.container{
justify-content:space-around;
}
.container{
place-content: space-evenly;
}
grid-auto-columns 属性， grid-auto-rows 属性
有的时候元素会跑到指定的网格之外，这时候浏览器会默认创建网格来放置它。
比如我生成的网格是三行三列，而我指定了一个元素放在五行五列。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
设置了之后行高和列宽会根据设置的来进行展示，如果不设置默认是根据网格里的内容大小来展示。
.container{
grid-auto-rows: 50px;
}
.eight {
background: #ABE3B7;
grid-row-start: 4;
grid-column-start: 2;
}
.nine {
background: #BFB540;
grid-row-start: 5;
grid-column-start: 3;
}
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
网格项目属性(可理解为子元素属性)
grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
/*one项目的位置在第2根行线和第4根行线之间*/
/* 没有指定左右边框所以默认还是在第1根到第2根之间*/
.one{
grid-row-start: 2;
grid-row-end: 4;
}
/* 设置了四个边框 */
/* 先列后行*/
.container{
grid-auto-flow:column;
}.one{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
grid-column-start: span 3;
看到这里有一个问题，我当前的网格是3*3，我如果跨越4个网格会怎样呢？
结果显示会超出当前网格，因为超出了一个网格，所有剩下的部分将作为一个网格。所有会直接沾满。
如果span 5 ，则超出两个网格，剩余部分会平分成两个网格。
grid-column 属性， grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。中间会加上/来区分。
.one {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.one{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
其中也可以使用span关键字
.one {
background: #19CAAD;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
grid-area 属性
grid-area属性指定项目放在哪一个区域
.container {
grid-template-areas: 'one . three'
'four five .'
'seven . nine';
}
/* 只对one项目（元素）使用了grid-area属性*/
.one {
background: #19CAAD;
grid-area:five;
}
justify-self 属性， align-self 属性， place-self 属性
同样与flex类似。
可取的值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
.one {
background: #19CAAD;
grid-area:five;
justify-self: center;
align-self: center;
/* place-self:center */
}
历史好文推荐：
1、Vue3之——和Vite不得不说的事 2、大厂面试算法之斐波那契数列 3、2020字节跳动面试题一面解析
“在看转发”是最大的支持
扫一扫
576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
