grid据说是最强大的css布局方案。
兼容性:灵活但兼容不好,就连谷歌浏览器都有部分不兼容:https://www.caniuse.com/?search=grid
grid布局特征:将容器划分为行和列,以产生单元格
1.容器 / 项目 / 单元格 / 网格线 / 容器属性
采用grid布局的区域,称为容器(container),容器内部采用网格定位的子元素,称为项目(item)
正常情况下,n行和m列会产生n*m个单元格(cell),比如3行*3列 = 9个单元格
划分网格的线,称为网格线,正常情况下,n行有n+1根水平网格线,m列有m+1根垂直网格线
定义在容器上的为容器属性,定义在项目上的为项目属性
2.容器属性
1.display
/*grid 块级 默认就是该display属性*/
display: grid/* grid 行级*/
display: inline-gridgrid项目的float、display: inline-block、display: table-cell、vertical-align和column-* 属性设置都会失效
块级效果示意:
行级效果示意:
2.定义行和列
grid-template-columns: 属性定义每一列的列宽 从左到右依次指定,绝对单位和相对单位都可以
grid-template-rows: 属性定义每一行的行高 从上到下依次指定,绝对单位和相对单位都可以
repeat():可以使用repeat()函数,简化重复的值;接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值;repeat()还可用于重复某种模式
auto-fill:关键字,表示自动填充
fr:关键字,fraction 的缩写,意为"片段",用于表示比例关系
minmax():该函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值
auto:关键字 表示由浏览器自己决定长度;自动填充
grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用
基础代码示例:
后续(定义行和列)页面效果在该基础上叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>grid布局学习</title>
<style>
span {
font-size: 2em;
}
.item {
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
}
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
.item-7 {
background-color: #b5a87f;
}
.item-8 {
background-color: #d0e4a9;
}
.item-9 {
background-color: #4dc7ec;
}
</style>
</head>
<body>
<!-- 注意,设为网格布局以后,容器子元素(项目)的
float、display: inline-block、
display: table-cell、
vertical-align和column-*等设置都将失效。
-->
<span>foo</span>
<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
<span>bar</span>
<script type="text/javascript"></script>
</body>
</html>
代码:
display: grid;
/* 绝对单位 */
grid-template-columns: 100px 200px 100px;
grid-template-rows: 100px 100px 100px;
/* 百分比 */
/* grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%; */
/* repeat() */
/* grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%); */
/* repeat() 重复某个模式*/
/* 这里示例为将100px 20px 80px 这一组数值重复3遍*/
/*grid-template-columns: repeat(3, 100px 20px 80px);*/
/* auto-fill 每列宽度150px,知道容器不能放置更多的列*/
/* grid-template-columns: repeat(auto-fill, 150px); */
/* fr */
/*表示后一列是前一列的2倍*/
/*grid-template-columns: 1fr 2fr;*/
/* 与绝对长度的单位结合使用 */
/*grid-template-columns: 50px 1fr 2fr;*/
/* minmax() */
/* minmax(100px, 2fr); 表示列宽不小于100px,不大于2fr */
/*grid-template-columns: 1fr 1fr minmax(100px, 2fr);*/
/* auto */
/* grid-template-columns: 200px auto 200px; */
/*
*指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字
*/
/* 网格布局允许同一根线有多个名字,比如[fifth-line row-5] */
/*
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
*/
绝对单位效果示意:
相对单位效果示意:
repeat()效果示意:
repeat()将100px 20px 80px 这一组数值重复3遍效果示意:
auto-fill效果示意:
fr(grid-template-columns: 50px 1fr 2fr)效果示意:
minmax()效果示意:
auto效果示意:
网格线取名效果示意:
3.定义行列间隔
grid-row-gap:属性设置行与行的间隔(行间距)
grid-column-gap:属性设置列与列的间隔(列间距)
grid-gap:grid-column-gap和grid-row-gap的合并简写形式
grid-template-areas:网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成
grid-auto-flow:容器的子元素会按照顺序,自动放置在每一个网格;默认值是row,即"先行后列";还可设置为row dense/column dense,表示按顺序排列后,尽量填满空格
tips:根据最新标准,上面三个属性名的grid-前缀已经删除;grid-column-gap和grid-row-gap写成column-gap和row-gap,grid-gap写成gap
基础代码示例:
后续(定义行列间隔)页面效果在该基础上叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>grid布局学习</title>
<style>
span {
font-size: 2em;
}
.item {
font-size: 2em;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
}
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
.item-7 {
background-color: #b5a87f;
}
.item-8 {
background-color: #d0e4a9;
}
.item-9 {
background-color: #4dc7ec;
}
#container{
display:grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
}
</style>
</head>
<body>
<span>foo</span>
<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
<span>bar</span>
<script type="text/javascript"></script>
</body>
</html>
代码:
/* grid-row-gap / grid-column-gap */
grid-row-gap: 20px;
grid-column-gap: 40px;
/* grid-gap: <grid-row-gap> <grid-column-gap>; */
/* grid-gap: 20px 40px; */
/* 如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值 */
/* grid-gap: 40px; */
/* 划分出9个单元格,然后将其定名为a到i的九个区域,分别对应这九个单元格 */
/* grid-template-areas: 'a b c'
'd e f'
'g h i';
*/
/* 多个单元格合并成一个区域的写法 */
/* 将9个单元格分成a、b、c三个区域 */
/* grid-template-areas: 'a a a'
'b b b'
'c c c';
*/
如果某些区域不需要利用,则使用"点"(.)表示 */
/* 代码中,中间一列为点,表示没有用到该单元格,或者该单元格不属于任何区域 */
/* grid-template-areas: 'a . c'
'd . f'
'g . i';
*/
/* 设成column,变成"先列后行" */
/* grid-auto-flow: column; */
grid-row-gap和grid-column-gap效果示意:
grid-template-areas效果示意同上,划分区域其实就是给区域命名,不会改变布局
grid-auto-flow效果示意:
参考上面的示例,可知,第一列与第一行交换了位置,依次类推;上代表先的意思
该文章是由学习阮一峰老师的CSS Grid 网格布局教程而产出