21-03-09 grid布局的学习

一、grid布局简介

• Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

• Grid 布局与 Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid布局远比Flex布局强大。不是说Grid布局取代Flex布局，实际上他俩可以很好的配合使用。

二、Grid Container（网格布局）属性：

display属性

• 将元素定义为grid container，并为其内容建立新的网格格式化上下文(grid formatting context)，属性值有2个：
  • grid ：生成一个块级(block-level)网格
  • inline-grid：生成一个行级(inline-level)网格

1.grid-template-columns/grid-template-rows属性：设置网格容器列属性

设置的值可以是百分比或者具体值，给几个值就会设置几列/行，若设置的值之和超出父容器的宽度就会出现滚动条

设置百分比会参照网格容器本身的宽度/高度，如果没有宽度/高度，则向上追溯，直到其找到设置宽度/高度的祖先元素，或者body标签的宽度就是网格容器的宽
度/高度。

.cotainer{
   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];
}

命名简写：命名重复的时候可以用repeat（）简写

.container{
	grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px 5%;
}
//可简写以上代码为如下代码
.container{
	grid-template-columns: repeat(3 [col-start] 20px) 5%;
}

fr单元允许等分网格容器剩余可用空间来设置网络轨道的大小。

//可用空间总量减去50px后。再给fr单元的值3等分
.container{
	grid-complate-columns: 1fr 50px 1fr 1fr;
}

2.grid-template-areas属性: 网格区块

• 通过引用grid-area属性指定的网格区域的名称来定义网络模板，重复网格区域的名称会使内容扩展到这些单元格。这个语法本身可看做网格的可视化结构。属性值只有3个：

  • < 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{
	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";
}

• 声明中的每一行都需要有相同数量的单元格，可以使用任意数量的.来声明单个空单元格。需要注意的是，不是在用这个语法命名单元格，而是在命名区域，使用这个语法时，实际上区域两端的网格线是自动命名的。 比如，如果网格区域的名称是foo，那么区域的起始的行网格线和列网格线名称是 foo-start，并且区域终点的行网格线和列网格线名称是 foo-end。 这意味着某些网格线可能有多个名称，比如上面的例子中最左边的一条网格线有三个名字：header-start，main-start 和 footer-start。

3、grid-template属性（用来简写 ）

建议使用grid属性来代替grid-template

.container{
	grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  	grid-template-columns: auto 50px auto;
  	grid-template-areas: 
    	"header header header" 
    	"footer footer footer";
}
/*以上代码可简写为以下代码*/
.container{
	grid-template:
		[row1-start] "header header header" 25px [row1-end];
		[row2-start] "footer footer footer" 25px [row2-end];
		/ auto 50px auto;
}

4、grid-column-gap/grid-row-gap属性

指定网格线的大小，可以想象为设置列/行之间的间距宽度

.container{
	grid-template-columns: 100px 50px 100px;
	grid-template-rows: 80px auto 80px;
	grid-column-gap: 10px;
	grid-rows-gap: 15px;
}

5、gird-gap属性

grid-row-gap 和 grid-column-gap 的简写。设置成一个值则为他们两个都是这个值

	.container{
	grid-gap: <grid-row-gap> <grid-column-gap>;
}

6、justify-items/align-items属性

内容相对于网格区域的对齐放方式，适用于容器内的所有的grid items，属性值有四个：

1. start：内容与网格区域的左端/顶端对齐
2. end：内容内容与网格区域的右端/底部对齐
3. center：内容位于网格区域的中间/垂直中心位置
4. stretch（默认值）：内容宽度/高度占据整个网格区域空间

7、place-items属性、

设置 align-items 和 justify-items 的简写

.container{
	place-items: <align-items> <justify-items>;
}

8、justify-content/align-content属性

如果所有的grid items都使用像px这样的非弹性单位来设置大小，则可能出现网格总大小小于其容器的大小，此时，可以设置网格容器的内的网格对齐方式，沿着行/列轴对齐网格，属性值有7个：

1. start：网格与网格容器的左边/顶部对齐

2. end：网格与网格容器的右边/底部对齐

3. center：网格与网格容器的中间对齐

4. stretch：调整grid item 的大小，让宽度/高度填充整个网格容器

5. space-around：在 grid item 之间设置均等宽度/高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半

6. space-between：在 grid item 之间设置均等宽度/高度空白间隙，其外边缘无间隙

7. space-evenly：在每个 grid item 之间设置均等宽度/高度的空白间隙，包括外边缘

9、place-content属性设置 align-content 和 justify-content 的简写

.container{
	place-content: <align-content> <justify-content>;
}

10、grid-auto-columns/grid-auto-rows属性

指定自动生成的网格轨道（又名隐式网格轨道）的大小。隐式网格轨道在你显式的定位超出指定网格范围的行或列时被创建，属性值可以是一个长度值、一个百分比值或一个自由空间的一部分（fr）

.container {
	grid-template-columns: 60px 60px;
	grid-template-rows: 90px 90px
}
//使用grid-column 和 grid-row来定位你的网格项目
.item-a{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.item-b{
	grid-column: 5 / 6;
	grid-row: 2 / 3;
}
//这里指定 .item-b开始于列网格线 5 并结束于在列网格线 6，但并未定义列网格线 5 或 6。因为引用了不存在的网格线，宽度为0的隐式轨道就会被创建用于填补间隙。可以使用 grid-auto-columns 和 grid-auto-rows属性来指定这些隐式轨道的宽度
.container{
	grid-auto-columns: 60px;
}

11、grid-auto-flow属性

如果有一些没有明确放置在网格上的grid item，自动放置算法会自动放置这些网格项，该属性则用于控制自动布局算法的工作方式，属性值有3个：

- row（默认值）：告诉自动布局算法依次填充每行，根据需要添加新行

- column：告诉自动布局算法依次填充每列，根据需要添加新列

- dense：告诉自动布局算法，如果后面出现较小的 grid item，则尝试填充在网格中较早的空缺

注意：dense 只会更改网格项的可视顺序，并可能导致它们出现乱序，这对可访问性不利

12、grid属性

在单个属性中设置所有以下属性的简写：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow（注意：只能在单个网格声明中指定显式或隐式网格属性）。属性值：

- none：将所有子属性设置为其初始值

- < grid-template>：与grid-template 简写的工作方式相同

- < grid-auto-flow> [< grid-auto-rows> [ / < grid-auto-columns>] ]
	：接受所有与grid-auto-flow，grid-auto-rows和grid-auto-columns相同的值。
	如果省略grid-auto-columns，则将其设置为为grid-auto-rows指定的值。
	如果两者都被省略，则它们被设置为它们的初始值

/*以下代码写法等价：*/
.container {
	grid: 200px auto / 1fr auto 1fr;
}
.container {
	grid-template-rows: 200px auto;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: none;
}

/*例，以下代码写法等价：*/
.container {
	grid: column 1fr / auto;
}
.container {
	grid-auto-flow: column;
	grid-auto-rows: 1fr;
	grid-auto-columns: auto;
}

/*也可用使用一个更复杂但相当方便的语法来一次设置所有内容。
可以指定 grid-template-areas、grid-template-rows以及 grid-template-columns，
并将所有其他子属性设置为其初始值。*/

/*例，在网格区域内，指定网格线名称和内联轨道大小：*/
.container {
	grid: 
	[row1-start] "header header header" 1fr [row1-end]
 	[row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
/*以上代码等价于：*/
.container {
	grid-template-areas: 
		"header header header"
		"footer footer footer";
	grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
	grid-template-columns: auto 50px auto;    
}

三、项目（Grid Items）的属性

1、grid-column-start/grid-column-end/grid-row-start /grid-row-end属性

使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置，属性值有：

- < line>：可以是一个数字来指代相应编号的网格线，也可以使用名称指代相应命名的网格线

- span< number>：网格项将跨越指定数量的网格轨道

- span< name>：网格项将跨越一些轨道，直到碰到指定命名的网格线

- auto：自动布局，或者自动跨越，或者跨越一个默认的轨道

.item-a{
	grid-column-start: 2;
	grid-column-end: five;
	grid-row-start: row1-start;
	grid-row-end: 3;
}

.item-b{
	grid-column-start: 1;
	grid-column-end: span col4-start;
	grid-row-start: 2;
	grid-row-end: span 2;
}

• 如果没有声明 grid-column-end / grid-row-end，默认情况下，该网格项将跨越1个轨道

• 网格项可以相互重叠，可以使用z-index来控制它们的堆叠顺序

2、 grid-column/grid-row属性

grid-column-start+ grid-column-end，和grid-row-start+ grid-row-end 的简写形式，属性值为 / ，每个值的用法都和属性分开写时的用法一样，

.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}

• 如果没有指定结束行值，则该网格项默认跨越1个轨道

3、 grid-area属性

给 grid item 进行命名以便于使用 grid-template-areas属性创建模板时来进行引用。另外也可以做为 grid-row-start+ grid-column-start+ grid-row-end+ grid-column-end 的简写形式。属性值有：

- < 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/align-self属性

沿着行/列轴对齐grid item 里的内容。此属性对单个网格项内的内容生效，属性值：

1. start：将内容对齐到网格区域的左端/顶部

2. end：将内容对齐到网格区域的右端/底部

3. center：将内容对齐到网格区域的中间

4. stretch（默认值）：填充网格区域的宽度/高度

• 要为网格中的所有grid items 设置对齐方式，也可以通过justify-items /align-items属性在网格容器上设置此行为

5、 place-self属性

是设置 align-self 和justify-self 的简写形式

.container{
	place-content: <align-self> <justify-self> | auto;
}

• 如果省略第二个值，则将第一个值同时分配给这两个属性