展示:
grid {
display : grid;
grid-auto-flow: row; // 设置网格布局的方向
grid-template-rows: 50px 100px； // 设置网格列宽
grid-template-columns: 30px 60px; // 设置网格行高
/*
重复的网格轨道:
grid-template-rows: repeat(4, 100px); // 设置了前4行行高
grid-template-columns: repeat(3, 1fr); // 设置了前 3 列的宽度
轨道的最小最大尺寸设置:
grid-template-rows: minmax(100px, auto); // 第一行行高最小高度设置成100px
grid-template-columns: minmax(auto, 50%) 1fr 3em; // 第一列宽度的最大值设置成50%
*/
grid-row-gap: 20px; // 行间隙
grid-column-gap: 20px; // 列间隙
/*
grid-gap:100px 1em; // 第一个值表示行间隙，第二个值表示列间隙
*/
grid-auto-rows: 140px; // 隐式行高
grid-auto-columns: 100px; // 隐式列宽
}
网格项目跨越行列:
.item1 {
grid-row-start: 2; //
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
/*
简写:
grid-row: 2;
grid-column: 3 / 4;
或
grid-row: 2 / span 3;
grid-column: span 2;
简写:
grid-area: 2 / 2 / 3 / 3;
*/
}
单位: fr, rem
- fr单位
单位fr用于表示轨道尺寸配额，表示按配额比例分配可用空间。类似于 Css 中的 flex
2、rem单位
是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
如果html标签的font-size是20px，那么1rem就是20。
网页的根标签是：html标签；html字号也叫根字号，根标签字号。
就是 20px 号字体的 一个间距
网格布局:
-
display: grid; 网格的宽度为整个容器的宽度,高度自适应
-
display: inline-grid; 宽高由自身的宽高决定
-
grid-auto-flow: row; 设置网格布局的方向, 默认: row 是 Y 轴方向, colum 是 X 轴的方向
网格高度:
grid-template-rows: 50px 100px； // 参数为设置每行的高度
对于后面参数的解释:
1. 已定义的: 每个参数与行是一一对应的
2. 未定义的: 行高取决于自身的高度
- 轨道的最小最大尺寸设置:
函数minmax()接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺
示例:
grid-template-rows: minmax(100px, auto);
第一行最小高度设置成100px，但是最大高度设置成auto，表示行高可以根据内容伸长超过100px。
- 重复的网格轨道:
函数repeat()接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。
示例:
grid-template-rows: repeat(4, 100px);
- 隐式网格:(我的理解就是,除了你定义的参数外的行或列的其他要展示的参数 )
隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间，或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。
示例:
grid {
display : grid;
grid-template-rows: 70px; // 只设置了一个的行高为 70px
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px; // 隐式行高, 除了第一行已设置的外的其他行的行高
grid-auto-columns: 100px; // 隐式列宽, 除了前两列的已设置的外的其他行的列宽
}
网格宽度:
grid-template-columns: 90px 50px 120px;
参数为每列的宽度,并且设置此参数后,子项布局会变成一行
对于后面参数的解释:
1. 已定义的: 每个参数与列是一一对应的
2. 未定义的: 列宽取决于自身的宽度
- 轨道的最小最大尺寸设置:
函数minmax()接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺
示例:
grid-template-columns: minmax(auto, 50%) 1fr 3em;
第一列宽度的最大值设置成50%，表示其宽度不能超过整个容器宽度的50%。
- 重复的网格轨道:
函数repeat()接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。
示例:
grid-template-columns: repeat(3, 1fr);
隐式网格:(除了你定义的参数外的行或列的其他要展示的参数 )
隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间，或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。
示例:
grid {
display : grid;
grid-template-rows: 70px; // 只设置了一个的行高为 70px
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px; // 隐式行高, 除了第一行已设置的外的其他行的行高
grid-auto-columns: 100px; // 隐式列高, 除了前两列的已设置的外的其他行的列宽
}
网格间隙:
grid-row-gap: 20px; // 行间隙
grid-column-gap: 20px; // 列间隙
简化:
grid-gap:100px 1em; // 第一个值表示行间隙，第二个值表示列间隙
注意:
1.网格间隙只创建在行列之间，项目与边界之间无间隙。
2.只能在一个 View 下多行的,才有效果
网格项目跨越行列:
行和列每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线。
不仅可以将 item1 移动到对于应的位置上, 还可以设置不同的 start 和 end 可以实现对 Item 1 的跨越行列效果;
.item1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
简写形式:
.item1 {
grid-row: 2;
grid-column: 3 / 4;
}
第一个表示 grid-row/column-start ，第二个值表示grid-row/column-end。而且你必须用斜杠（/）分隔这两个值。
如果只指定一个值，它表示 grid-row/column-start;
.item1 {
grid-row: 2 / span 3;
grid-column: span 2;
}
关键字 span 用来指定跨越行或列的数量。
.item1 {
grid-area: 2 / 2 / 3 / 3;
}
属性grid-area 是 grid-row-start, grid-column-start, grid-row-end 和 grid-column-end的简写形式。
如果四个值都指定，则第一个表示 grid-row-start, 第二个表示 grid-column-start, 第三个表示 grid-row-end ,第四个表示 grid-column-end。
网友评论