grid 布局的使用
grid 布局的使用
css 网格布局，是一种二维布局系统。
浏览器支持情况:老旧浏览器不支持，
概念： 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。
<div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div>
网格项。网格容器的子元素。
<div class="container"> <div class="item "></div> <div class="item "></div> <div class="item"></div> </div>
网格线。组成网格线的分界线，他们可以是列网格线，也可以是行网格线
网格轨道。两个相邻的网格线之间为网格轨道，可以认为是网格的行列或者行。
网格单元。两个相邻的列网格线和两个相邻的网格线组成的网格单元，它是最小的网格单元。
网格区。网格区是由任意数量网格单元组成。
设置在网格容器上的属性
注：当元素设置了网格布局，column、float、clear、vertical-align属性无效
1. display: grid | inline-grid | subgrid;
属性值： grid: 生成块级网络
inline-grid: 生成行内网格
subgrid: 如果容器本身是网格项，用来继承父容器的行列大小。
2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size>
设置行和列的大小。
属性值： track-size: 轨道大小，可以使用css长度，百分比或用分数。
line-name:网格线名字，可以选择任意名字。
当设置行或者列大小为auto 时，网格会自动分配空间和网格名称。
.container{ display:grid; grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; }
可以给网格线定义名字.
.container{ display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }
用fr单位可以将容器分为几等份，例如下面分成三等份
.container{ display:grid; grid-template-columns: 1fr 1fr 1fr; }
3.grid-template-areas
通过获取网格项中的grid-area属性值（名称），来定义网格模版。
重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元。
属性值： grid-area-name: 网格项的grid-area属性值（名字）‘.’ : 空网格单元 none: 不定义网格区域
.item-a{ grid-area: header; }
.item-b{ grid-area: main; }
.item-c{ grid-area: sidebar; }
.item-d{ grid-area: footer; }
.container{
display:grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
}
4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;
网格单元间距
属性值：line-size: 网格线间距,设置单位值
.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; }
5. grid-gap：<grid-column-gap> <grid-row-gap>;
是grid-column-gap 和 grid-row-gap简写。
.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-gap: 10px 15px; }
6. justify-items: start | end | center | stretch（默认） ;
垂直于列网格线对齐，适用于网格容器里的所有网格项。
属性值：
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满（默认）。
.container{ display:grid; justify-items: start; }
7. align-items: start | end | center | stretch ;
垂直于行网格线对齐，适用于网格容器里的所有网格项。
属性值：
start： 顶部对齐。
end： 底部对齐。
center： 居中对齐。
stretch：填满（默认）。
8. justify-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容
器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。
属性值： start: 左对齐。 end: 右对齐。 center: 居中对齐。
stretch: 填满网格容器。 space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。
space-between: 两边对齐，网格项之间间隔相等。 space-evenly: 网格项间隔相等。
.container{ display:grid; justify-content: start; }
9. align-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格
容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。
属性值： start: 顶部对齐。 end: 底部对齐。 center: 居中对齐。
stretch: 填满网格容器。 space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。
space-between: 两边对齐，网格项之间间隔相等。 space-evenly: 网格项间隔相等。
.container{ display:grid; align-content: start; }
10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器
范围时，将自动创建隐式网格轨道.
属性值：track-size: 网格轨道大小,可以是固定值，百分比或者是
分数（fr单位）。
.container{ display:grid; grid-template-columns: 60px 60px; grid-template-rows: 90px 90px }
11. grid-auto-flow : row（默认） | column | dense ;
在没有设置网格项的位置时，这个属性控制网格项怎样排列
属性值：
row: 按照行依次从左到右排列。
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。
设置在网格项上的属性
1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的
开始位置，grid-column-end、grid-row-end定义网格项的结束位置。
属性值： line: 指定带编号或者名字的网格线。 span <number>: 跨越轨道的数量。
span <name>: 跨越轨道直到对应名字的网格线。 auto: 自动展示位置，默认跨度为1。
.item-a{ grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 }
2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ; 是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。 .item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }
3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
定义网格项名字，以便创建模块（容器属性grid-template-areas来定义模块）。
属性值： name: 项目名子。 <row-start> / <column-start> / <row-end> / <column-end>:
可以是数字或网格线名字。
例子： 定义网格项名字：
.item-d{ grid-area: header }
通过网格线定位网格项：
.item-d{ grid-area: 1 / col4-start / last-line / 6 ; }
4. justify-self: justify-self: start | end | center | stretch;
定义单个网格项垂直于列网格线的对齐方式。
属性值： start: 网格区域左对齐。 end: 网格区域右对齐。
center: 网格区域居中。 stretch: 网格区域填满。
5. align-self: start | end | center | stretch;
定义单个网格项垂直于行网格线的对齐方式。
属性值：
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。
