关于 网格布局 笔记

网格布局 笔记

网格布局的声明

我们可以在元素上声明`display: grid` 或者 `display: inline-grid`来创建一个网格容器。

网格轨道

• grid-template-columns
• grid-template-rows

grid-template-columns	设置每一列所占的大小
grid-template-rows		设置每一行所占的大小

fr 单位

网格布局中还引入另外一种长度单位“fr”。
fr 代表网格容器中可用空间的一等份。

repeat 函数

如果网格布局中存在着重复部分，比如说：
{
    display: grid;
    grid-template-columns: 30px 50px 50px 50px 40px;
}
在这里50px重复多次，那么就可以使用该函数，如下：
{
    display: grid;
    grid-template-columns: 30px repeat(3, 50px) 40px;
}
该函数的有2个参数：如上例子代表着，一共有3列，没列所占空间大小为50px。

minmax 函数

比如说有种特殊情况，我们想给网格一个最小的尺寸，那么就可以就可以使用该函数。
{
    grid-template-columns: minmax(100px, auto);
}
这个例子，代表了最小不能低于100px，最大则是auto，自适应。

跨轨道放置网格元素

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

grid-column-start: 1;	表示子元素从第"1"列线开始
grid-column-end: 3;		表示子元素在第"3"列线结束	如果这一行没有3列的话会自动创建至第3列线
grid-row-start: 1;		表示子元素从第"1"行线开始
grid-row-end: 3;		表示子元素在第"3"行线结束	如果这一行没有3行的话会自动创建至第3行线	

网格间距

• grid-column-gap
• grid-row-gap

grid-column-gap: 10px;	表示子元素中每一列直接的间距，这里是10px
grid-row-gap: 10px;		表示子元素中每一行直接的间距，这里是10px

z-index 控制层级

多个网格可以占用同一个网格单位。
可以使用z-index。

自动填充网格轨道

• auto-fill
• auto-fit

创建类似弹性盒子的效果，同时保证内容严格按照行和列固定规则排列。

grid-column 和 grid-row 缩写

grid-column-start 和 grid-column-end 可以合并为 grid-column。
grid-row-start 和 grid-row-end	可以合并为 grid-row。

写法如下：
grid-column: 1 / 2;
grid-row: 1 / 4;

grid-area 属性

grid-area的属性值按顺序为 grid-row-start、grid-column-start、grid-row-end、grid-column-end

写法如下：
grid-area: 1 / 1 / 4 / 2;

网格间距的缩写

grid-gap参数为：第一个会被用于grid-row-gap，第二个则会被用于grid-column-gap。

列轴的对齐

• align-self
• align-items

align-self		可以个子元素单独设置
align-items		设置全部元素的对齐方式

行轴的对齐

• justify-items
• justify-self

justify-items		可以个子元素单独设置
justify-self		设置全部元素的对齐方式