grid layout网格布局详解
什么是grid layoutgrid的特点grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位frrepeat函数minmax函数repeat函数的第一个参数为auto-fillgrid css属性介绍gridgrid-gapgrid-auto-flowgrid-auto-rowsgrid-auto-columnsgrid-template-columnsgrid-template-rowsgrid-template-areasgrid-templategrid item css属性介绍grid-rowgrid-columngrid-area参考文档 MDN web docs
什么是grid layout
grid 是Web的二维布局系统。和html的表格有点像，由行和列组成，我们可以在上面设计每一个元素
grid的特点
grid layout 包括行、列、行间隙和列间隙grid layout 可进行模板化设计grid layout 是响应式布局方式grid layout 的子元素可以对自己进行定位grid css属性的基础知识
创建一个grid布局
.container {display: grid;}
创建一个网格
.container {display: grid;grid-template-columns: 200px 200px 200px;}.item {background-color: green;border-width: 1px;border-radius: 5px;border-style: solid;}
<div class="container"><div class="item">11</div><div class="item">22</div><div class="item">33</div><div class="item">44</div><div class="item">55</div><div class="item">66</div><div class="item">77</div></div>
实际效果
隐性网格与显性网格
显性网格是指规划的网格之内的部分，隐性网格是指规划的网格之外的部分。
比如定义一个两行两列的网格，那么第一行第二行和第一列第二列的交叉的部分就属于显性网格，第三行和第三列及以外的所有元素都属于隐性网格
.container {display: grid;/*定义显性网格部分的列宽，共两行*/grid-template-columns: repeat(2, 100px);/*定义显性网格部分的行高，共两列*/grid-template-rows: repeat(2, 250px);/*定义隐性网格部分的行高*/grid-auto-rows: 200px;/*定义隐性网格部分的列宽*/grid-auto-columns: 50px;}.item {background-color: green;border-width: 1px;border-radius: 5px;border-style: solid;}
<div class="container"><div class="item">11</div><div class="item">22</div><div class="item">33</div><div class="item">44</div><div class="item">55</div><div style="grid-column: 3/4" class="item">66</div><div class="item">77</div></div>
尺寸单位fr
.container {display: grid;/* 将可用的空间分成4份，第一列站两份*/grid-template-columns: 2fr 1fr 1fr;}
repeat函数
需要传两个参数
重复的次数，可以理解成每行或每列放置元素的次数每次元素的尺寸，可以传多个尺寸，用空格隔开
.container {display: grid;/*每行重复3次，每次一个元素，且占用1份的空间*/grid-template-columns: repeat(3, 1fr);}
.container {display: grid;/*每行重复3次，每次两个元素，第一个元素占用2份的空间，第二个元素占用1份的空间*/grid-template-columns: repeat(3, 2fr 1fr);}
minmax函数
这个函数也是需要传两个参数
最小尺寸最大尺寸
.container {display: grid;grid-template-columns: repeat(3, minmax(100px, 200px) 100px);}
空间足够大时
拖动浏览器宽度，空间不足时
repeat函数的第一个参数为auto-fill
结合minmax函数就可以设计一个响应式的布局
.container {display: grid;/*会尽可能使用当前行的可用空间*/grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
拖动浏览器宽度
grid css属性介绍
grid
更多介绍
这个属性可以完全替换grid-template-rows, grid-template-columns, grid-template-areas和grid-auto-rows, grid-auto-columns, grid-auto-flow六个属性
grid-gap
更多介绍
这个属性定义网格的间隙，
.container {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);/*行间距和列间距为10px*/grid-gap: 10px}
.container {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);/*行间距为10px，列间距为1%*/grid-gap: 10px 1%}
还可以使用grid-row-gap和grid-column-gap分别设置行和列间距
grid-gap: 10px 2% 等同于grid-row-gap: 10px;grid-column-gap: 2%
grid-auto-flow
更多介绍
flow流动的意思，这个属性就是用来定义网格元素的自动流动方向，默认row，按行一个个排列，
column就是按列排列，还有一个dense，会把小的元素插入网格前面的可用空间里面
.container {display: grid;grid-template: repeat(3, 100px)/repeat(3, 100px);grid-auto-columns: 100px;grid-auto-rows: 100px;}
<div class="container"><div style="grid-column-start: 2" class="item">11</div><div class="item">22</div><div style="grid-row-start: 3" class="item">33</div><div class="item">44</div><div class="item">55</div><div class="item">66</div><div class="item">77</div><div class="item">88</div><div class="item">99</div></div>
没有grid-auto-flow属性相当于grid-auto-flow: row，按行排列，看效果
加入grid-auto-flow: column
修改grid-auto-flow: column dense，效果如下图，本来44的左边是空白，因为有dense，导致自动把44放置在了这个空白处，44后面的元素也会自动往前排列
注意：如果前面的空间不足 以放下44这个元素时，会空着，等后面有合适尺寸的元素放置进去
grid-auto-rows
更多介绍
这个属性用于指定隐性网格行的高度尺寸
.container {display: grid;grid-template-columns: repeat(2, 100px);grid-template-rows: repeat(2, 250px);/*隐性网格行的高度会按照这两个尺寸交替使用*/grid-auto-rows: minmax(100px, 200px) 150px;}
grid-auto-columns
更多介绍
这个属性用于指定隐性网格列的宽度尺寸
.container {display: grid;grid-template-columns: repeat(2, 100px);grid-template-rows: repeat(2, 250px);/*隐性网格列的宽度会按照这两个尺寸交替使用*/grid-auto-columns: 50px min-content;}
<div class="container"><div class="item">11</div><div class="item">22</div><div style="grid-column: 3/4" class="item">33</div><div style="grid-column: 4/5" class="item">44</div><div style="grid-column: 5/6" class="item">55</div><div class="item">66</div><div class="item">77</div><div class="item">88</div></div>
grid-template-columns
更多介绍
这个属性在上面吃的栗子中已经出现过很多次了，它的作用就是将显性网格列的尺寸进行模板化，只需要简单的这一个属性就可以定义所有列的尺寸
.container {display: grid;grid-template-columns: 100px 20% 1fr minmax(100px, 300px)}.item {background-color: green;border-width: 1px;border-radius: 5px;border-style: solid;}
grid-template-rows
更多介绍
类似于grid-template-columns，grid-template-rows是定义显性网格行的尺寸模板
.container {height: 500px;display: grid;grid-template-columns: 100px;grid-template-rows: repeat(2,100px minmax(100px, 150px));}
<div class="container"><div class="item">11</div><div class="item">22</div><div class="item">33</div><div class="item">44</div></div>
grid-template-areas
更多介绍
可以把它理解成一个二位数组或者矩阵，布局简单粗暴
直接上代码
.container {display: grid;grid-template-rows: 100px 100px 100px;grid-template-columns: repeat(3, 100px);grid-template-areas: "aa aa aa""bb dd ee""bb cc cc";}.item {background-color: green;border-width: 1px;border-radius: 5px;border-style: solid;}
<div class="container"><div style="grid-area: aa" class="item">11</div><div style="grid-area: bb" class="item">22</div><div style="grid-area: cc" class="item">33</div><div style="grid-area: dd" class="item">44</div><div style="grid-area: ee" class="item">55</div></div>
实际效果
grid-template
更多介绍
这个属性可以完全替代grid-template-areas，grid-template-rows，grid-template-columns
/*一下两种设置方式效果是一样的*/.container {display: grid;grid-template: "aa aa aa" 100px"bb dd ee" 100px"bb cc cc" 100px / 100px 100px 100px;}.container {display: grid;grid-template-rows: 100px 100px 100px;grid-template-columns: repeat(3, 100px);grid-template-areas: "aa aa aa""bb dd ee""bb cc cc";}
grid item css属性介绍
grid-row
更多介绍
可以理解为绝对定位，定位自己在整个网格的哪一行以及跨度几行
.container {display: grid;grid-template: repeat(3, 100px)/repeat(3, 100px);grid-auto-flow: dense;}.item {background-color: green; border-width: 1px;border-radius: 5px;border-style: solid;}.item1 {/*定位在第2行*/grid-row: 2;}.item2 {/*跨度两行*/grid-row: span 2;}.item3 {/*定位在第2行，跨度两行*/grid-row: 2 / span 2;}
<div class="container"><div class="item item1">11</div><div class="item item2">22</div><div class="item item3">33</div><div class="item">44</div><div class="item">55</div></div>
grid-column
更多介绍
类似于grid-row，它是用来定位元素在网格中列的位置
grid-area
更多介绍
可以对grid-row和grid-column统一设置
.container {display: grid;grid-template: repeat(3, 100px)/repeat(3, 100px);grid-auto-flow: dense;}.item {background-color: green; border-width: 1px;border-radius: 5px;border-style: solid;}.item1 {grid-area: span 3 / span 2}
<div class="container"><div class="item item1">11</div><div class="item">22</div><div class="item">33</div><div class="item">44</div></div>
