css Grid网格布局
网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
给容器设置display：grid
给容器设置display：inline-grid, 容器变成行内元素，该元素内部采用网格布局
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid 网格布局</title> <style> ul{ margin: 0; padding: 0; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } ul li{ list-style: none; } </style> </head> <body> </body> ---cssGrid--- <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> ---End--- <script> var oLi = document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++) { oLi[i].style.background = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; } </script> </html>
auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
grid-template-columns: repeat(auto-fill, 100px);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid 网格布局</title> <style> ul{ margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-template-rows: 100px 100px 100px; } ul li{ list-style: none; } </style> </head> <body> </body> ---cssGrid--- <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> ---End--- <script> var oLi = document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++) { oLi[i].style.background = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; } </script> </html>
fr 关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
.container { display: grid; grid-template-columns: 1fr 2fr; }
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
.container { grid-row-gap: 20px; grid-column-gap: 20px; }
项目属性
grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
.item-1 { grid-column-start: 2; grid-column-end: 4; }
上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
