Grid学习笔记

学习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