上面的方法通过 grid 属性模拟栅栏布局, 来实现各种功能. 而这个响应式的实现, 不再是需要使用 html+CSS 实现 aside 的移动, 而只需要改变 CSS 中的 grid-areas 属性即可实现
而这样纯 CSS 代码实现 div 的移动, 我们可称之为源代码的独立性, 即 HTML 只是用来标记内容, CSS 来设计样式.
tip: 最后补充一点 区域的命名会影响到网格线, 每个区域的起始网格线会自动命名为 "区域名 - start", 终止网格线自动命名为 "区域名 - end".
grid-auto-flow
划分网格以后, 容器的子元素会按照顺序, 自动放置在每一个网格. 默认的放置顺序是 "先行后列", 即先填满第一行, 在开始放入第二行.
而这个顺序由 grid-auto-flow 属性决定, 默认值是 row, 及先行后列, 也可以将他设成 columns, 变成 "先列后行".
- column : 1 4 7 row : 1 2 3
- 2 5 8 4 5 6
- 3 6 9 7 8 9
grid-auto-flow 属性除了设置成 row 和 column, 还可以设成 row dense 和 columns dense. 这两个值主要用于, 某些项目指定位置以后, 剩下的项目怎么放置
row dense : 先填满横行, 尽量不出现空格
column dense : 先填满列, 尽量不出现空格
容器内子元素的属性
项目的位置是可以指定的, 具体方法就是指定项目的四个边框, 分别定位在哪根网络线
grid-column-start : 左边框所在的垂直网格线
grid-column-end : 右边框所在的垂直网格线
grid-row-start : 上边框所在的水平网格线
grid-row-start : 下边框所在的水平网格线
例:
- .item1{
- grid-column-start:2;
- grid-column-end:4;
- }
- /* 起始于第二根网格线, 第四根垂直网格线结束 */
来源: http://www.bubuko.com/infodetail-3355974.html