单词
grid ：网格 / 栅格 （古瑞的）
row：行
column :列 （阔了目）
template ： 模板 （探不累）
justify：调整
content：内容
item ： 项目
container：容器
self ：自已
fracion :片段
area:地区，区域（唉儿瑞而）
10areas：十个区域
1area：一个区域
grid 布局系统术语
Grid container 网格内容
Grid item 网格项目
Grid line 网格容器
行轴：Grid row
列轴：Grid column
1.定义网格容器display: grid
被设置display: grid属性的元素将会变成网格容器。
Display 属性
- 当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。
2.定义显式网格
- grid-template-columns：定义显式网格列(列数和列宽)
- grid-template-rows：定义显式网格行(行数和行高)
- **grid-template: **grid-template-columns 和grid-template-rows的简写属性，定义显式网格(网格列,网格行,网格区域)。
属性值：- fr 单位， grid-template-columns: repeat(3,2fr);/*设置三列,没一列都占比1份
- none 默认值。在需要时创建列。
- auto 列的尺寸取决于容器的大小以及列中项目内容的大小。
- max-content 根据列中最大的项目设置每列的尺寸。
- min-content 根据列中最小的项目设置每列的尺寸。
- length 设置列的尺寸，通过使用合法的长度值。参阅长度单位。
- grid-template-areas:定义显式网格区域
示例：
.box{
grid-template-areas:
"header header header"
"main main main"
"footer footer footer";
}
3.定义隐式网格
- grid-auto-rows：定义隐式网格的行高
- ** grid-auto-columns:** 定义隐式网格的列宽
4.（1）定义网格沿行轴/列轴的对齐方式(父元素应用)
- justify-content:定义网格沿行轴的对齐方式
- align-content:定义网格沿列轴的对齐方式
- justify-items:定义网格单元沿行轴的对齐方式
-
align-items:定义网格单元沿列轴的对齐方式
示例1：
justify-content
.container{
/* ***************关于对齐项目(2)************************************** */
justify-content: end; /* 沿着水平轴对齐到水平终点. */
justify-content: start; /* 沿着水平轴对齐到水平起点 */
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
justify-content: center;/* 沿着水平轴对齐到水平居中 */
}
示例2：
align-items:
.container{
/* ***************关于对齐项目(1)*************************** */
align-items: flex-end; /* 对齐到当前行内内沿垂直轴终点 */
align-items: flex-start; /* 对齐到当前行内沿垂直轴的起点 */
align-items: stretch; /* 默认 */
align-items: center; /* 沿当前行内居中 */
}
4.（2）定义网格沿行轴/列轴的对齐方式(子元素应用)
-
align-self：覆盖 align-items的值
-
justify-self:覆盖 justify-items值
属性值：- stretch:它是此属性的默认值，它使内容填充到单元格的整个宽度。
- normal:这是微不足道的属性，即在块级布局和替换的absolutely-positioned框中充当开始，在其他绝对定位的框，表和flex布局中处于拉伸状态，在网格布局中被视为拉伸，除非在少数情况下，例如框以高宽比作为起始值。
-
auto:它是位于父元素中的justify-items属性使用的值，或默认为正常值。它是默认值。
-
baseline：它使当前框的第一个或最后一个基线集的对齐基线与baseline-sharing组中所有框的共享的第一个或最后一个基线集中的对应基线对齐。第一个基准的fall-back值是开始，最后一个基准的fall-back值是结束。
-
start：它允许内容自行对齐到单元格的左侧。
-
end:它使内容可以在单元格的右侧对齐。
-
center：它允许内容使其自身与单元格的中心对齐。
-
flex-start:与起始值相同。
-
flex-end:与最终值相同。
-
self-start:它将项目在项目的开头对齐到对齐容器的左侧。
-
self-end:它将项目在项目末尾对齐到对齐容器的右侧。
-
left:它使物品包与对齐容器的左侧齐平。如果属性的轴与内联轴不平行，则它与start相同。
-
right:它使项目包装与对齐容器的右侧齐平。如果属性的轴与内联轴不平行，则其作用与末端相同。
-
safe:如果项目溢出对齐容器，则使该项目对齐为起始值。
-
unsafe:不管相对大小对齐容器和项目如何，它都会使项目按给定值对齐。
示例1：
align-self：
.container{
/* **********垂直对齐子元素*************** */
align-self: center; /* 对齐到侧轴的居中位置 */
align-self: flex-end; /* 对齐到侧轴的终点位置 */
align-self: flex-start;/*对齐到侧轴的起点位置*/
}
示例2：
justify-self:
.container{
/* **********水平对齐子元素*************** */
justify-self: center;/* */
justify-content: flex-end; /* */
justify-content: flex-start;/* */
}
5.网格间距
- 可以通过使用以下属性之一来调整间隙大小：
column-gap：属性设置列间距：
row-gap ：属性设置行间距：
gap：属性是 row-gap 和 column-gap 属性的简写属性
示例：
.container{
/* *********************网格间距************************** */
column-gap: 10px /*每一列之间相隔10px */
row-gap: 10px; /* 每一行之间相隔10px */
gap: 10px; /*每一列和一行之间相隔10px */
}
6.设置跨行跨列
- grid-column-start:设置起始列线
- grid-column-end：设置结束列线
- grid-column 属性：是 grid-column-start 和 grid-column-end 属性的简写属性。
- grid-row-start:设置起始行线
- grid-row-end：设置结束行线
- grid-row: grid-row-start和 grid-row-start的复合属性
-
grid-area 属性：可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
示例1：
.container .item1{
/* ****************跨行************************** */
grid-column-start: 1; /* 启始线 */
grid-column-end: 3; /*结束线 */
/* grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。 */
grid-column: 1 / span 2 ; /*跨列复合属性： 从跨线1开始到跨线3结束 */
}
示例2：
.container .box1{
/* ****************跨列*************************** */
grid-row-start: 1 ;/*起始位置 */
grid-row-start: 3;/*结束位置 */
grid-row: 1 / 2; /* grid-row-start和 grid-row-start的复合属性*/
/* grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。 */
grid-area: 1 / 2 / 5 / 6;
}
7.网格响应式
minmax(200px,1fr)) :每一行可以大于等于200px ,但不能小于.1fr
@media screen and (max-width:800px){
.container{
/* grid-template-columns: 1fr; */
/* **********网格响应式,视口宽度小于500网格布局换为2行显示***************** */
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
/* repeat(auto-fill :自适应
,minmax(200px,1fr)) :每一行可以大于等于200px ,但不能小于.1fr*/
}
定义网格模板列:列数和列宽
grid-template-columns： 属性定义网格布局中的列数，并可定义每列的宽度。
/* ***************************定义网格模板列:列数和列宽********************* */
/* grid-template-columns: 100px 200px 300px; */
/* grid-template-columns: 20% 40% 20%; */
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
grid-template-columns: repeat(3,1fr);/*设置三列,没一列都占比1份*/
/* grid-template-columns: repeat(3,300px); */
8.创建网格模板区域的步骤
第一步：创建网格系统
第二步：创建模板（确定父元素和子元素）
第三步: 创建名称
第四步：指定列数列宽 行数行宽
网友评论