grid布局系统
单词
- 1.grid：网格 栅格
- 2.Row：行
- 3.column：列
- 4.template：模板
- 5.justify：调整
- 6.content：内容
- 7.itme：项目
- 8.Container：容器
- 9.self：自己
- 10.Fraction：片段
- 11.Area：地区、区域
- 10areas：10各区域
- 1area：一个区域（一个不用加s）
- 2areas：两个区域（一个以上要加s）
grid布局系统术语
- Grid container：网格容器
- grid item：网格项目
- Grid Line：网格线
- row：行
- column：列
grid-template-columns
定义：网格模板列：列数和列宽
网格使用步骤
第一步：创建网格系统
第二步：创建模板（确定父元素和子元素）
第三步：创建名称
第四步：指定列数列宽 行数行宽
六大组
- 第一组网络容器
- 第二组显式网格
- 第三组隐式网格
- 第四组对齐方式
- 第五组网络间距
- 第六组跨列跨行
1.网格列宽：定义网络模板列
语法：
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);
grid-template-columns: repeat(3,200px);
2.网格间距
语法:
column-gap: 10px;
row-gap: 10px;
gap:10px;
3.网络和行高
语法：
grid-auto-rows: 200px;
grid-auto-rows: minmax(150px,auto);
grid-template-rows: 100px 200px 100px;
grid-template-rows: repeat(3,1fr);
4.垂直对齐项目
语法：
align-items: stretch;
align-items: start;
align-items: end;
align-items: center;
5.水平对齐项目
语法：
justify-content: end;
justify-content: start;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
6.垂直对齐子元素
语法：
align-self: end;
align-self: center;
7.水平对齐子元素
语法：
justify-self: end;
justify-self: center;
justify-self: start;
8.跨列
语法：
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3;
grid-column: 1 / span 2;
9.跨行
语法：
grid-row-start: 2;
grid-row-end: 4;
grid-row: 2 / 4;
10响应式
语法：
grid-template-columns: 1fr;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
第一组网格容器
display:grid
定义：设置网格容器
第二组显式网格
grid-template-rows
定义：设置显式网格行（行数和行高）
示例
.container{
grid-template-rows: 100px 100px;/*两行，行高100px*/
}
grid-template-columns
定义：设置显式网格列（列数和列宽）
示例
.container{
grid-template-columns: 100px 100px 100px; /*三列，列宽100px*/
/*grid-template-columns: repeat(3,1fr);*/ /*三列，等宽*/
}
grid-template(简写属性)
定义：简写方式；设置显式网格（网格列、网格行、网格区域）
示例
.container{
grid-template: 100px 100px / 100px 100px 100px;
/*两行，行高100px*/ /*两列，列宽100px*/
}
grid-template-areas
定义：设置显式网格区域
示例：
.container{
grid-template-areas: "header header header",
"main main main",
"footer footer footer";
}
第三组隐式网格
grid-auto-rows
定义：设置隐式网格的行高(只有一个值)
示例：
.container{
grid-auto-rows: auto;
}
grid-auto-columns
定义：设置隐式网格的列宽(基本用不上)
示例：
.container{
grid-auto-columns: 200px;
}
第四组对齐方式
justify-content
定义：设置网格沿行轴的对齐方式
属性值描述:
- flex-start 默认值。项目位于容器的开头。
- flex-end 项目位于容器的结尾。
- center 水平居中对齐
- space-between 项目在行与行之间留有间隔。
- space-around 项目在行之前、行之间和行之后留有空间。
示例
.container{
justify-content: end; /*位于行轴的结尾*/
}
justify-items
定义：设置网格单元沿行轴的对齐方式
语法
justify-items: start | end | center | stretch;
示例
.container{
justify-items: center;/*位于行轴线的中心位置*/
}
justify-self
定义：覆盖justify-items的值
示例
.box{
justify-self: start;
}
align-content
定义：设置网格沿列轴的对齐方式
属性值描述
- stretch:默认值。行拉伸以占据剩余空间。
- center:垂直居中对齐
- flex-start:位于容器开头
- flex-end:位于容器结尾
- space-between:行均匀分布在弹性容器中。
- space-around:行均匀分布在弹性容器中，两端各占一半。
示例
.container{
align-content: end;/*位于列轴结尾*/
}
align-items
定义：设置网格单元沿列轴的对齐方式
语法:
align-items: stretch|center|flex-start|flex-end|baseline
示例：
.container{
align-items: center;/*位于列轴中间*/
}
align-self
定义：覆盖align-items的值
示例：
.box{
align-self: end;
}
第五组网格间距
column-gap
定义：设置列间距
示例：
.container{
column-gap:10px /*每列的间距为10px*/
}
row-gap
定义：设置行间距
示例
.container{
row-gap:10px /*每行的间距为10px*/
}
gap（简写属性）
定义：网格间距
示例：
.container{
gap:10px /*元素与元素的间距为10px*/
}
第六组跨列跨行
grid-column-start
定义：设置跨列起始线
示例
.box{
grid-column-start:1
}
grid-column-end
定义： 设置跨列结束线
示例
.box{
grid-column-end: 3;
}
grid-column(简写属性)
定义：跨列简写属性
示例
.box{
grid-column: 1 / 3;
}
grid-row-start
定义：跨行起始线
示例：
.box{
grid-row-start:1
}
grid-row-end
定义：跨行结束线
示例：
.box{
grid-row-end: 3;
}
grid-row(简写属性)
定义：跨行简写属性
示例：
.box{
grid-row:1 / 3
}
grid-area(简写属性)
定义：定义网格区域 是grid-column和grid-row的简写属性
示例
.box{
grid-area:header;
}
