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：填充整个网格区域的高度（这是默认值）