学习Grid布局中的一些笔记。
参考：GRID GARDEN
grid-column-start属性
网格中从左起第n列的边界。grid-column-start:n;。网络默认只占一列，可以结合grid-column-end属性。可以设置为负值。
//从第1列开始，第4列结束
#water {
grid-column-start: 1;
grid-column-end:4;
}
可以根据网格的开始和结束位置来定义一个网格项，也可以用span关键词来指定你所要跨越的宽度。请注意span只能是正值。也可以将span关键字和grid-column-start一起使用，相对于结束位置来设置其宽度。
//从第2列开始，第4列结束
#water {
grid-column-start: 1;
grid-column-end: span 2;
/*grid-column: 1 / span 2;*/
}
grid-column属性
上述缩写。比如说： grid-column: 2 / 4;就会设置网格项从第二列开始，到第四列结束。
grid-row-start grid-row-end grid-row
垂直方向的起始位置。
grid-area属性
grid-column和grid-row的缩写。grid-area属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。grid-area: 1 / 1 / 3 / 3。
order属性
如果网格项不是以grid-area、grid-column、grid-row 等显示的，它们会自动按照它们在源程序中出现的位置摆放。同样我们也可以使用order属性来重写它的顺序。默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数，就像z-index一样。
grid-template-columns属性和grid-template-rows属性
每一条规则都有5个值，代表创建了5个列和5个行，每一列设置为容器宽度的20%。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
repeat函数
使用grid-template-columns: 20% 20% 20% 20% 20%;属性定义了5列，每列占20%。这可以被简写为：grid-template-columns: repeat(5, 20%);。
fr单位
网格系统也引入了一个新的单位，分数fr。每一个fr单元分配一个可用的空间。比如说，如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。
grid-template属性
grid-template-columns属性和grid-template-rows属性的缩写。比如说·grid-template: 50% 50% / 200px;将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。
综合练习
grid.png
#garden {
display: grid;
grid-template:1fr 50px / 20% 80%;
}
grid2.png
网友评论