兼容性

查看链接
目前好像就只有 百度 和 QQ 浏览器不太支持，还有我们的老朋友 IE 6-9

详细教程——因为 阮一峰 老师的讲的肯定比我好，所以如果是准备学习的可以直接看这个，
我这里就做一下笔记。

速记版

  2. .container {
  3.         display : grid | inline-grid
  4.         // 设置行列
  5.     grid-template-clumns : 15px 15px 30px  | repeat(2,15px) 20px  | repeat(2,15px) auto
  6.     grid-template-clumns : repeat(auto-fill , 20px) // 20px 自动填充单元格
  7.     grid-template-clums : 1fr 1fr 2fr | 1fr 1fr minmax(1fr,200px)   // 等比珊栏布局
  9.     grid-template-rows : 15px 15px 20px 
  11.     // 行列的间隔
  12.     grid-clum-gap : 15px;
  13.     grid-row-gap : 15px
  14.     grid-gap : 15px 15px;  // 简写，先行在列
  16.     // 区域
  17.     grid-template-area : "header header header"
  18.                                              "center center silder"
  19.                          "footer footer footer";
  21.     // 流动
  22.     grid-auto-flow:row(默认) | clumn;
  23.     grid-auto-flow: clumn dense  // "先列后行"，并且尽量填满空格  | row dense
  25.         // 对齐 （内部的项目）    
  26.     justify-items ： start | end | center | strech;
  27.     align-items : start | end |center | strech;
  28.     place-items // 上面两个的缩写 注意是先align-items 再justify-items
  29.     // 对齐 （容器本身）
  30.     justify-content : start | end | center | strech | space-beween | space-around | space-evenly
  31.     align-content : start|end|center|strech|space-between|space-around|space-enely
  32.     splace-content : // 缩写
  34.     // 溢出宽高
  35.     grid-auto-rows : 20px;
  37. }
  38. // 项目属性
  39. item1{
  40.     // 定义位置
  41.     grid-cloum-start:1;  // 第一条竖线
  42.   grid-cloum-end : 3;  
  43.   grid-row-start : 2;
  44.   grid-row-end : 4 ;
  46.   grid-row-end: span 2 // 横线之间间隔2表示高为2
  48.   //位置缩写
  49.   grid-cloum:1/3;  
  50.   grid-row : 2/4;  | 2/sapn2
  52.   // 项目区域
  53.   grid-area : e ;  | 1/2/3/4
  55.   // 布局
  56.   justify-self : start | end | center | strech ;
  57.   align-self : start | end |center | strech;
  59. }

一、概述

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Grid：网格布局 - 图1

二、基本概念

2.1 容器和项目

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。

2.2 行和列

容器里面的水平区域称为”行”（row），垂直区域称为”列”（column）。

2.3 单元格

行和列的交叉区域，称为”单元格”（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

2.4 网格线

划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

三、容器属性

3.1 display

声明容器的采用grid布局，他有两个值——分别会展现的和 block 和 inline-block 一样的特性

  • display:grid
  • display:inline-grid

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

3.2 行高列宽

  • grid-template-columns 定义每一列的列宽
  • grid-template-rows 定义每一行的行高

    grid-template-columns: 100px 100px 100px; // 三列，每一列为100px grid-template-rows: 100px 100px 100px;


（1）repeat()

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

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: repeat(3, 33.33%);
  4.   grid-template-rows: repeat(3, 33.33%);
  5. }

（2）auto-fill 关键字

auto-fill关键字表示自动填充。
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: repeat(auto-fill, 100px);
  4. }

表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

（3）fr 关键字

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

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr;
  4. }
  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 150px 1fr 2fr;
  4. }

上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

（4） minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

  1. grid-template-columns: 1fr 1fr minmax(100px, 1fr);

（5）auto 关键字

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

  1. grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

3.3 行间隔，列间隔

  • grid-row-gap 属性， 行与行的间隔（行间距）
  • grid-column-gap 属性， 列与列的间隔（列间距）
  • grid-gap 属性 行-列简写grid-gap : ; 
  1. .container {
  2.   grid-row-gap: 20px;
  3.   grid-column-gap: 20px;
  4. }

等同于下面的 （如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。）

  1. .container {
  2.   grid-gap: 20px 20px;
  3. }

3.4 区域

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

多个单元格合并成一个区域的写法如下。

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px 100px;
  4.   grid-template-rows: 100px 100px 100px;
  5.   grid-template-areas: "header header header"
  6.                        "main main sidebar"
  7.                        "footer footer footer";
  8. }

如果某些区域不需要利用，则使用”点”（.）表示。

  1. grid-template-areas: 'a . c'
  2.                      'd . f'
  3.                      'g . i';

上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。 比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

3.5 流动- 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。
这个顺序由grid-auto-flow属性决定，默认值是row，即”先行后列”。也可以将它设成column，变成”先列后行”。

grid-auto-flow: column

  • colum
  • row
  • colum dense 表示”先行后列”，并且尽可能紧密填满，尽量不出现空格。
  • row dense
    1. grid-auto-flow: column dense;
    Grid：网格布局 - 图2
    上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在1号项目的后面。8号项目和9号项目就会排到第四行。
    如果将设置改为column dense，表示”先列后行”，并且尽量填满空格。

3.6 单元格内的对齐方式

水平 — justify-items

垂直 — align-items

//stretch：拉伸，占满单元格的整个宽度（默认值）

  1. .container {
  2.   justify-items: start | end | center | stretch;
  3.   align-items: start | end | center | stretch;   
  4. }

justify-items : start;
Grid：网格布局 - 图3
align-items:start
Grid：网格布局 - 图4

简写 — place-items

  1. place-items: <align-items> <justify-items>;

3.7 盒子对齐方式

justify-content 属性，

align-content 属性，

  1. .container {
  2.   justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  3.   align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
  4. }

stretch - 项目大小没有指定时，拉伸占据整个网格容器。
Grid：网格布局 - 图5

  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

Grid：网格布局 - 图6

  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

Grid：网格布局 - 图7

简写 — place-content

  1. place-content: <align-content> <justify-content>

3.8 超出部分的宽高

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

它们的写法与grid-template-columns和grid-template-rows完全相同。
如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px 100px;
  4.   grid-template-rows: 100px 100px 100px;
  5.   grid-auto-rows: 50px; 
  6. }

上面代码指定新增的行高统一为50px（原始的行高为100px）。
Grid：网格布局 - 图8

3.9 grid-template 属性

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。

四、项目属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

4.1

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线
  1. .item-1 {
  2.   grid-column-start: 2;
  3.   grid-column-end: 4;
  4. }

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
理解
上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会”先行后列”进行排列。读者可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。

span

表示”跨越”，即左右边框（上下边框）之间跨越多少个网格。

  1. .item-1 {
  2.   grid-column-start: span 2;
  3. }

上面代码表示，1号项目的左边框距离右边框跨越2个网格。

这与下面的代码效果完全一样。

  1. .item-1 {
  2.   grid-column-end: span 2;
  3. }


z-index

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

4.2 - 合并简写

  • grid-column grid-column属性是grid-column-start和grid-column-end的合并简写形式
  • grid-row grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
    1. .item-1 {
    2. grid-column: 1 / 3;
    3. grid-row: 1 / 2;
    4. }
    5. /* 等同于 */
    6. .item-1 {
    7. grid-column-start: 1;
    8. grid-column-end: 3;
    9. grid-row-start: 1;
    10. grid-row-end: 2;
    11. }

4.3 指定项目在哪

grid-area属性指定项目放在哪一个区域。

  1. .item-1 {
  2.   grid-area: e;
  3. }

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

  1. .item {
  2.   grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  3. }

4.4 自身定位

  • justify-self 属性，
  • align-self 属性，
  • place-self 属性
    1. .item {
    2. justify-self: start | end | center | stretch;
    3. align-self: start | end | center | stretch;
    4. }
    place-self属性是align-self属性和justify-self属性的合并简写形式。
    start
    Grid：网格布局 - 图9