Grid Layout栅格系统

一.概述

• Grid布局很强大，可以集合Flex布局一起使用。
• Grid布局将网页分成一个个网格，我们可以组合不同的网格做出各种各样的布局。Grid 和 table 相似，都有行 和 列。
  我们只需要将网格元素放在指定的位置即可。
  
  Grid VS VS Flex
• Grid 和 Flex 布局有相似之处，都可以指定容器内部多个项目的位置。
• Flex布局是轴线布局 ，只能指定“项目”针对轴线的位置（可以看成是一维的）
• Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid布局远比Flex布局强大。

二.名词解释

网格容器（Grid Container）

	<article>
		<div><p>1</p></div>
		<div><p>2</p></div>
		<div><p>3</p></div>
		<div><p>4</p></div>
		<div><p>5</p></div>
	</article>

将 article 变成一个网格容器很简单 只需要指定 display : grid
这里的 article 就是一个网格容器
css代码

article {
	display : grid
}

网格项 （也称为项目）

里面嵌套的

就是网格容器的 项目 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的

元素就不是项目。Grid 布局只对项目生效。

网格线

注意：网格线仅仅是我们在定义网格容器的时候就产生的，跟我们的网格项没有直接的关联。网格线是我们在定义网格容器的时候伴随出来的虚拟的概念，也就是说在实际的HTML中是找不到这些线的。

网格轨道 Grid Track
两个相邻的网格线之间为网格轨道。
网格轨道的特点是一定会顶到容器的边缘。
网格轨道必然跟网格项没有关联。

三.容器属性

3.1display属性

• grid：生成块级网格。
• inline-grid：生成行内网格。
• subgrid：如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。

display: grid指定一个容器采用网格布局。

	article {
		display : grid;
}

下图是一个基本的栅格系统 ：规定了两行五列

display: inline-grid 指定一个容器采用行内网格布局（不做详细说明和传统的布局 linline-block 相似）

*注意：注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-等设置都将失效。

3.2 grid-template-rows 和 grid-template-columns 属性

指定网格布局 按行和列 划分宽度
grid-template-rows ： 划分每一行的高度
grid-template-columns ： 划分每一列的宽度

 article {
	display: grid;
	grid-template-rows: 100px 100px 100px;
	grid-template-columns: 100px 100px 100px;
}
// 绘制一个三行三列  行和列都为 100px

上面介绍过上图中的 每一行每一列都是一个 网络轨道

• 轨道大小 track-size： 可以使用css长度（px、em等）、百分比、或用分数（用 fr （份））

(1) repeat 函数 重复某个值

• repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

article {
	display: grid;
	grid-template-rows: repeat(3 , 1fr);
	grid-template-columns: repeat(3 , 1fr);
}

• repeat()重复某种模式也是可以的。

article {
	display:grid;
	grid-template-rows:repeat(2 , 100px 100px 100px);
	grid-template-columns:repeat(2,100px 100px 100px);
}

(2) auto-fill 以项目为准自动填充。

article {
	display: grid;
	grid-template-rows:repeat(auto-fill, 100px);
	grid-template-columns:repeat(auto-fill, 100px);
}

(3) fr （份 或者片段）

• 网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

article {
	display: grid;
	grid-template-rows: 1fr 2fr 1fr;
	grid-template-columns: 1fr 2fr 1fr;
}

• fr可以与绝对长度的单位结合使用，这时会非常方便。

article {
	display: grid;
	grid-template-rows: 1fr 100px 200px;
	grid-template-columns: 1fr 100px 200px;
}

（4） minmax 长度范围 最小值到最大值

• minmax 接收两个参数： 最小值，最大值

article {
	display: grid;
	grid-template-rows: 1fr minmax(100px,200px);
	grid-template-columns: 1fr minmax(100px,200px);
}

**(5) auto **

• auto关键字表示由浏览器自己决定长度。

article {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
}

（6）网格线的名称

article {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

3.3 grid-row-grap 和 grid-column-grap 和 gap

• grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

article{
	...
   grid-row-gap:10px;  // 设置行间距为10px
   grid-column-gap:10px; // 设置列间距为10px
}

gap是缩写形式

• 如果gap省略了第二个值，浏览器认为第二个值等于第一个值。

article{
	...
	gap: 10px 10px; // 和上面效果一样
}

3.4grid-template-areas 区域声明

• 区域是由多个单元格构成，使用 grid-template-areas可以定义栅格区域，并且栅格区域必须是矩形的
  grid-tempalte-areass使用：

 article {
            display: grid;
            grid-template-rows: 50px 60px 100px;
            grid-template-columns: 80px 70px 100px;
            grid-template-areas:
                    "a a a"
                    "b b b"
                    "c c c"
        }

• 一个简单的页面布局

        article {
            height: 100vh;
            width:100vw;
            display:grid;
            grid-template-columns: 100px 1fr;
            grid-template-rows: 100px 1fr 100px;
            grid-template-areas: 
            "header header"
            "nav main"
            "footer footer";
        }
         header {
            grid-area:header;
        }
        nav {
            grid-area: nav;
        }
        main {
            grid-area: main;
        }
        footer {
            grid-area: footer;
        }
        // html 结构
        <article>
    		<header>header</header>
    		<nav>nav</nav>
    		<main>main</main>
    		<footer>footer</footer>
		</article>

通过 grid-template-areas 能够快速布局整个页面