grid布局笔记
1、应用 display: grid 的元素。这是所有网格项（Grid Items）的直接父级元素。即容器
2、网格容器（Grid Container）的子元素（直接子元素）。
3、注意：在 网格容器(Grid Container) 上使用column，float，clear， vertical-align 不会产生任何效果。
4、grid-template-columns / grid-template-rows
– <track-size>： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
– <line-name>：你可以选择的任意名称
grid-template-columns: repeat(3, 10px) 5%
eg:
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
5、grid-template-areas
通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。
一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。
值：
grid-area-name：由网格项的 grid-area 指定的网格区域名称
.（点号） ：代表一个空的网格单元
none：不定义网格区域
6、grid-template
用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 缩写 (shorthand) 属性。
值：
none：将所有三个属性设置为其初始值
subgrid：将grid-template-rows，grid-template-columns 的值设为 subgrid，grid-template-areas设为初始值
grid-template-rows / grid-template-columns：将 grid-template-columns 和 grid-template-rows 设置为相应地特定的值，并且设置grid-template-areas为none
7、justify-items 沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容，该值适用于容器内的所有网格项。
start：将内容对齐到网格区域(grid area)的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间（水平居中）
stretch：填满网格区域宽度（默认值）
网格项的内容相当于网格的宽度（水平）
8、align-items 沿着 列轴线(column axis) 对齐 网格项(grid items) 内的内容。
start：将内容对齐到网格区域(grid area)的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间（垂直居中）
stretch：填满网格区域高度（默认值）
9、网格合计大小可能小于其 网格容器(grid container) 大小时，使用justify-content设置网格容器内的网格的对齐方式, 此属性沿着 行轴线(row axis) 对齐网格
start：将网格对齐到 网格容器(grid container) 的左边
end：将网格对齐到 网格容器 的右边
center：将网格对齐到 网格容器 的中间（水平居中）
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
10、网格合计大小可能小于其 网格容器(grid container) 大小时，使用align-content设置网格容器内的网格的对齐方式, 此属性沿着 列轴线(column axis) 对齐网格
start：将网格对齐到 网格容器(grid container) 的顶部
end：将网格对齐到 网格容器 的底部
center：将网格对齐到 网格容器 的中间（垂直居中）
stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
11、grid-auto-columns / grid-auto-rows
指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。
在你明确定位的行或列（通过 grid-template-rows / grid-template-columns），超出定义的网格范围时，隐式网格轨道被创建了。
eg:
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
12、grid-auto-flow
如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。
值：
row：告诉自动布局算法依次填充每行，根据需要添加新行
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺
eg:
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
设置为row时中间未设置起始线的bcd会按行自动排列
设置为column时中间为设置起始线的bcd会按照列自动排列（先排满第一列再排下一列）
13、grid综合写法
.container {
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}
子元素属性
14、通过指定 网格线(grid lines) 来确定网格内 网格项(grid item) 的位置。
grid-column-start / grid-row-start 是网格项目开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。
line ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
span number ：该网格项将跨越所提供的网格轨道数量
span name ：该网格项将跨越到它与提供的名称位置
auto ：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度
eg:
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start
grid-row-end: 3
}
如果没有声明指定 grid-column-end / grid-row-end，默认情况下，该网格项将占据1个轨道（即一行或者一列）
15、grid-column / grid-row
分别为 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的缩写形式。
16、grid-area
为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。
另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的缩写。
eg:.item-d {
grid-area: header
}
eg:.item-d {
grid-area: 1 / col4-start / last-line / 6
}
17、justify-self 沿着 行轴线(row axis) 对齐 网格项 内的内容，此值适用于单个网格项内的内容。
start：将内容对齐到网格区域的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间（水平居中）
stretch：填充整个网格区域的宽度（这是默认值）
18、align-self 沿着 列轴线(column axis) 对齐 网格项 内的内容,此值适用于单个网格项内的内容。
start：将内容对齐到网格区域的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间（垂直居中）
stretch：填充整个网格区域的高度（这是默认值）
前端笔记0-0
