https://github.com/ZongDuCha/ZD-1.0
display:gri
最近时间在了解css3 中不太常用的grid布局,但是却又非常的好用
以前不管我们怎么布局,大多数用的都是一维布局,在复杂的场景下非常难用
而grid使用的是类似与table的二维布局
(grid 兼容情况)
一开始父元素声明布局为grid
.grid{ display:grid; }
复制代码
grid-template-columns
grid-template-rous
然后使用grid-template-columns 定义列, grid-template-rous 定义行 ,创建一个4行4列的布局
.grid{
border: 1px solid #000; width: 350px; margin: 0 auto; display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 50px 50px 50px 50px;
}
复制代码
fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间(就像Flexbox中无单位的值)
用浏览器查看效果(我用的是谷歌)
可以看到已经有4行4列的效果了
可以指定某行的宽度或高度,比如第二列的第二行高度为50%,宽度为50%
grid-template-columns: 1fr 50% 1fr 1fr;
grid-template-rows: 50px 100px 50px 50px;;复制代码
还可以使用grid-gap给相邻的网络增加10px的缝隙
.grid{
border: 1px solid #000;
width: 95%;
margin: 0 auto;
display:grid;
grid-template-columns: 1fr 50% 1fr 1fr;
grid-template-rows: 20px 50px 20px 20px;
grid-gap:10px;
} 复制代码
个
在grid容器里写一个grid-list的div
.grid-list{ grid-column:4; grid-row:2; } 复制代码
可以看到grid-column:4把位置放在了父容器网格列中的第四列
而grid-row:2放在了父容器网格行的第二行。
123
而且grid-column,grid-row很有意思,写多几个div
<div class="grid">
<div class="grid-list">1</div>
<div class="grid-list">2</div>
<div class="grid-list">3</div>
</div>复制代码
.grid-list:nth-child(1){ grid-column:7; grid-row:7;}
.grid-list:nth-child(2){ grid-column:6; grid-row:6;}
.grid-list:nth-child(3){ grid-column:5; grid-row:5;}复制代码
可以看到子元素定义grid-column,grid-row可以改变在网格的位置
可以用斜线(开头/结尾)这样写
.grid-list:nth-child(1){ grid-column: 1/5;}
.grid-list:nth-child(2){ grid-column: 1;grid-row:2/4}
.grid-list:nth-child(3){ grid-column: 3/5;grid-row: 3/5;}复制代码
同样的方式有
grid-column-start (行的开头) grid-column-end(行的结尾)
grid-row-start (列的开头) grid-row-end(列的结尾)
.grid-list:nth-child(1){ grid-column-start:1;grid-column-end:5}
.grid-list:nth-child(2){ grid-column-start:1;grid-row-start:2;grid-row-end:4}
.grid-list:nth-child(3){ grid-column-start: 3;grid-column-end:5;grid-row-start: 3;grid-row-end: 5;}复制代码
结果跟上面的一样,感觉比较复杂
个人心得,未来的布局应该会大部分使用grid,现在赶紧学习学习
在ie11下grid不能使用,有什么办法呢?
使用:https://github.com/FremyCompany/css-grid-polyfill (目前还是1.0)