[TOC] > [阮一峰 grid 教程] (https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html) ## 概述 启动 grid ``` display:grid ``` > 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 ## 容器属性 ### grid-template-columns 定义每列宽 ### grid-template-rows 定义每行的宽 grid-template-columns与 grid-template-row 语法一致 语法 ``` grid-template-columns: 200px 200px // 每多一个元素多一行 grid-template-columns: 33.33% 33.33% 33.33% // 也可使用百分号 grid-template-columns: repeat(auto-fill, 100px); // 固定列宽,响应式加列数目 grid-template-columns: repeat(3, 33.33%) // 使用 repeat 复写 grid-template-columns: 1fr 2fr // 分2列,第一个为第二列的2倍 grid-template-columns: 100px 1fr 2fr // 分3列,第一个100px,剩下的宽度第三个为第二列的2倍 grid-template-columns: 100px minmax(100px,200px) 100px // 中间列,最小100px,最大200px,放大缩小时,中间列优先改变 grid-template-columns: 100px auto 100px; // 中间列根据自动列宽 grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // 使用方括号指定每个网格线的名字 ``` 示例 ``` .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } ``` ### grid-row-gap 行属性 ### grid-column-gap 列属性， ### grid-gap 简写属性 ``` grid-row-gap: 20px; grid-column-gap: 20px; grid-gap: 20px 20px; ``` > grid-gap 如何省略第二个值,那么第二个值等于第一个值 ### grid-template-areas 合并网格 ``` <style> .a{grid-area: a;} .b{grid-area: b;} .c{grid-area: c;} .d{grid-area: d;} .e{grid-area: e;} .wrapper{ display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px 200px 200px; grid-template-areas: "a a a" "b c d" "e . ." } .wrapper>div{ } .wrapper>div:nth-child(odd){ background-color: #3dbe86; } .wrapper>div:nth-child(even){ background-color: #2aa471; } </style> <div class="wrapper"> <div class="a">1</div> <div class="b">2</div> <div class="c">3</div> <div class="d">4</div> <div class="e">5</div> </div> ```  ### grid-auto-flow 行列优先级 默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行,通过 grid-auto-flow 可先行后列 ``` grid-auto-flow: column|row; ``` ### justify-items 水平位置 ``` .container { justify-items: start; } ``` 效果  ### align-items 垂直位置 ``` .container { align-items: start; } ```  ### place-items 水平垂直位置 ``` .container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; } place-items: <align-items> <justify-items>; ``` 属性描述 ``` start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。 ``` > [参考在线代码](https://jsbin.com/loluhuvota/edit?css,output) ### justify-content justify-content属性是整个内容区域在容器里面的水平位置（左中右） **start**  **space-around**  **space-between**  **space-evenly** 项目间隔与到两边的间隔都一样  ### align-content align-content属性是整个内容区域的垂直位置（上中下）  ### place-content 合并写法 ``` .container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; } ``` *-content 表示对 容器 wrapper 进行对齐, ## 项目属性 ### grid-[column|rows]-[start|end] ``` grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线 ``` > 可是使用数字表示网格先,也可是使用 span 表示跨域几个网格 示例1:指定垂直线 ``` .item-1 { grid-column-start: 2; // 从第二垂直到第四垂直线 grid-column-end: 4; } ```  示例2: 指定垂直水平线 ``` .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; } ```  示例3: span 跳转 ``` .item-1 { grid-column-start: span 2; } ```  ### grid-area grid-area属性指定项目放在哪一个区域。 ``` .item-1 { grid-area: e; } ``` ### [justify|align|space|-self 只作用于单个项目 `justify-self`属性设置单元格内容的水平位置（左中右），跟`justify-items`属性的用法完全一致，但只作用于单个项目。