本文详细介绍了Grid布局的原理和使用方法，包括兼容性对比、DEMO展示、容器和项目属性设置，以及如何合并网格列。通过实例解析了Grid布局的行和列定义、自动填充、间隔、区域指定等关键概念，还探讨了与Flex布局的区别。虽然Grid布局在IE浏览器中兼容性不佳，但其强大的二维布局能力使其成为现代网页设计的重要工具。
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">Onediv>
<div class="two item">Twodiv>
<div class="three item">Threediv>
<div class="four item">Fourdiv>
<div class="five item">Fivediv>
<div class="six item">Sixdiv>
<div class="seven item">Sevendiv>
<div class="eight item">Eightdiv>
<div class="nine item">Ninediv>
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: ; */
/* 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 */
}
菜单权限处理 [项目实战]
Node 到底是用来干嘛的呢？
如何提高github下载速度到2MB/s
手写webpack核心原理，再也不怕面试官问我webpack原理
14条 Scss 缩减50%样式代码的实战经验总结
又一个布局利器， CSS 伪类 :placeholder-shown
封装一个vue视频播放器组件
对于组件的可重用性，大佬给出来6个建议
学习 TS 不要错过的八个工具
Node 中的全链路式日志标记及处理
使用 Node 开发服务器项目时如何高效地打日志？
用TypeScript学设计模式(享元模式)
用TypeScript学设计模式(模板方法模式)
TypeScript 设计模式之适配器模式
用TypeScript学设计模式(观察者模式)
用TypeScript学设计模式(单例模式)
点在看的人特别帅/美
扫一扫
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
