前端第八天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

第八天内容为CSS Grid。

一、Grid Columns & Rows

grid 类似于flex，但是不同的是grid是二维的。使用方法为

.grid{
	display: grid;
}

grid-template-columns 属性用来定义行的排布，如下图示例一意为一行有三个grid项目，分别占1个单位、2个单位和2个单位宽度。每行的三个项目会填充整行。fr 单位代表网格容器中可用空间的一等份。
示例二用了repeat函数，前一个值为个数，后一个为设置。auto意为自动填补剩余，3, auto就表明一行三个项目自动填充整行（均匀的）。grid-gap为每个grid项目间的间距。

.grid{
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;/*示例1*/
	grid-template-columns: repeat(3, auto);/*示例2*/
	grid-gap: 1rem;
}

grid-template-rows属性用来定义列的排布，使用方法column一样。

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

二、Grid Span

span（跨度），用来作为属性的值。下例中第一行表示第一个孩子元素的行从第一个间隔线开始，第二行表示第一个孩子元素的行从第四个间隔线结束。三四行表示列，
最后两行运用了span，1代表起始，span后的数字代表跨越几个间隔。故1 / span 3 的长度为即表示第一二行。

.item:first-child{
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column: 1 / span 3;
      grid-row: 1 / span 2;
    }

三、autofill & minmax

该方法没有给定每行的项目个数，根据实际情况自动填充。每个项目的大小根据后面的minmax变化。如下例，minmax(200px, 1fr)含义是每一个列的宽度最小是200像素，最大是1fr，也就是等分宽度。假设容器现在的宽度是500像素，此时每一列的宽度应该是250px，因为此时一定是两列，因为每一列的最小宽度是200像素，至少应该是500/200列，由于有1fr的最大宽度限制，因此，每一列的宽度是2列等分尺寸也就是500px/2。换句话说，最小200px，满足后所有项目为1fr。

	.grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }

四、grid-template

grid-template类似于一种可视化，可以参考下例。引号部分很直观的展现每个项目的排布。第一行全部是header，第二行content和sidebar占比2：1，第三行box-1和box-2占比1：2，以此类推。

	<style>
    .container{
      display: grid;
      grid-template-areas: 
      'header header header'
      'content content sidebar'
      'box-1 box-2 box-2'
      'box-3 box-3 box-3' 
      'footer footer footer';
      grid-gap: 1rem;
    }

五、grid media queries

和正常的media-queries类似，故不再赘述。