grid栅格布局

前面的话

　　Grid布局方式借鉴了平面装帧设计中的格线系统，将格线运用在屏幕上，而再也不是单一的静态页面，能够称之为真正的栅格。本文将详细介绍grid布局

 

引入

　　对于Web开发者来讲，网页布局一直是个比较重要的问题。但实际上，在网页开发很长的一段时间当中，咱们甚至没有一个比较完整的布局模块。总的来讲 Web 布局经历了如下四个阶段：

　　一、table表格布局，经过 Dreamweaver 拖拽表格或者手写 table 标签布局

　　二、float浮动及position定位布局，借助元素元素盒模型自己的特性以及 float position 等属性等进行布局

　　三、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 排列方向、对齐方式，自适应尺寸。是目前最为成熟和强大的布局方案

　　四、grid栅格布局，二维布局模块，具备强大的内容尺寸和定位能力，适合须要在两个维度上对齐内容的布局

　　Grid Layout 是一种基于二维网格的布局系统，旨在彻底改变咱们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷

　　与flex分为伸缩容器和伸缩项目相似，grid也分为网格容器和网格项目

 

网格容器

display

　　经过display属性设置属性值为grid或inline-grid能够建立一个网格容器。网格容器中的全部子元素就会自动变成网格项目（grid item）

display: grid
display: inline-grid

　　网格项目默认放在行中，而且跨网格容器的全宽

 

显式网格

　　使用grid-template-columns和grid-template-rows属性能够显式的设置一个网格的列和行 

【grid-template-rows】

　　默认值为none

　　grid-template-rows指定的每一个值能够建立每行的高度。行的高度能够是任何非负值，长度能够是px、%、em等长度单位的值

grid-template-rows: 60px 40px

　　item1和item2具备固定的高，分别为60px和40px。由于只定义了两个行的高度值，因此item3和item4的高度是根据其自身的内容来定义。

【grid-template-columns】

　　默认值为none

　　像行同样，经过grid-template-columns指定的每一个值来建立每列的列宽

grid-template-columns: 40px 50px 60px

　　item4和item5放置在新的一行（第二行），由于grid-template-columns只定义了三列的大小，它们也分别放置在列一、列2和列3；其中列一、列2和列3的尺寸大小等于item一、item2和item3宽度。item一、item2和item3具备固定的宽度值，分别为40px、50px和60px

【fr】

　　fr单位能够帮助咱们建立一个弹列的网格轨道。它表明了网格容器中可用的空间（就像Flexbox中无单位的值）

grid-template-columns: 1fr 1fr 2fr

　　在这个示例中，网格容器分红了4等份（1 + 1 + 2 = 4），每一份（1fr）是网格容器宽度的四分之一。因此item1和item2的宽度是网格容器的四分之一宽，item3是网格容器宽度的四分之二（2fr）

grid-template-columns: 3rem 25% 1fr 2fr

　　当fr和其它长度单位的值结合在一块儿的时候，fr是基于网格容器可用空间来计算。

　　在这个示例中，网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr就是基于这个尺寸计算：

1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3

【minmax()】

　　能够经过minmax()函数来建立网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。能够接受任何长度值，也接受auto值。auto值容许网格轨道基于内容的尺寸拉伸或挤压

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

　　在这个示例中，第一行的高度最小值是100px，但其最大值为auto，容许行的高度能够变大超过100px。第一列设置了最小值为auto，但它的最大值是50%，也就是列的最大宽度不会超过网格容器宽度的50%

【repeat()】

　　使用repeat()能够建立重复的网格轨道。这个适用于建立相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每一个轨道的尺寸。

grid-template-rows: repeat(3, 1fr);    
grid-template-columns: 30px repeat(3, 1fr) 30px;

　　在这个示例中，第一列和最后一列的宽度都是30px，而且它们之间有另列三列，这三列是经过repeat()来建立的，并且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）

间距

【grid-column-gap】 

　　建立列与列之间的间距

【grid-row-gap】

　　建立行与行之间的间距

【grid-gap】

　　默认值为0

　　grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，若是它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。若是只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同

　　[注意]grid-gap只能建立列与列或行与行之间的间距，但不能建立列和行与网格容器边缘的间距

　　间距(Gap)能够设置任何非负值，长度值能够是px、%、em等单位值

 

网格项目

网格线

【grid-row-start】

【grid-row-end】

【grid-column-start】

【grid-column-end】

　　默认值为auto

　　经过网格线能够定位网格项目。网格线其实是表明线的开始、结束，二者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增长1

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;　 

　　两列三行的网格建立三条列网格线和四条行网格线。item1就是由行和列的号码从新定位。若是一个网格项目跨度只有一行或一列，那么grid-row-end和grid-olumn-end不是必需的

【grid-row】

【grid-column】

grid-row: 2; 
grid-column: 3 / 4;

　　grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。若是只提供一个值，则指定了grid-row-start(grid-column-start)值；若是提供两个值，第一个值是grid-row-start(grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，二者之间必需要用/隔开

　　默认值为auto

【span】

　　关键词span后面紧随数字，表示合并多少个列或行

grid-row: 1 / span 3;
grid-column: span 2;

【grid-area】

grid-area: 2 / 2 / 3 / 3;

　　若是指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end

 

网格线命名

　　经过grid-template-rows和grid-template-columns定义网格时，网格线能够被命名。网格线名称也能够设置网格项目位置

　　分配网格线名称必须用方括号[网格线名称]，而后后面紧跟网格轨道的尺寸值。定义网格线名称时须要避免使用规范中出现的关键词，以避免致使混乱。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

　　能够在方括号中添加多个名称来命名网格线名称，使用多外名称命名网格线名称时，名称间要用空格隔开。每个网格线的名称能够用来定位网格项目的位置

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; 
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

　　使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置相似，引用网格线名称的时候不该该带方括号

　　使用repeat()函数能够给网格线分配相同的名称。这能够节省必定的时间。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

　　使用repeat()函数能够给网格线命名，这也致使多个网格线具备相同的网格线名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是惟一的标识符

　　使用相同的网格线名称能够设置网格项目的位置。网格线的名称和数字之间须要用空格分开 

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

网格区域命名

【grid-template-areas】

　　像网格线名称同样，网格区域的名称可使用grid-template-areas属性来命名。引用网格区域名称也能够设置网格项目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

　　设置网格区域的名称应该放置在单引号或双引号内，每一个名称由一个空格符分开。网格区域的名称，每组（单引号或双引号内的网格区域名称）定义了网格的一行，每一个网格区域名称定义网格的一列

　　[注意]grid-template-areas: "header header" "content sidebar" "footer footer";不能够简写为grid-template-areas: "header" "content sidebar" "footer";

　　grid-row-start、grid-row-end、grid-column-start和grid-column-end以及简写的grid-row、grid-column、grid-area均可以引用网格区域名称，用来设置网格项目位置

隐式网格

【grid-auto-flow】

　　网格默认流方向是row，能够经过grid-auto-flow属性把网格流的方向改变成column　　 

grid-auto-flow: column

　　当网格项目确认在显式网格以外时就会建立隐性网格，当没有足够的空间或者显式的网格轨道来设置网格项目，此时网格项目就会自动建立隐式网格

【grid-auto-rows】

【grid-auto-columns】

　　使用grid-auto-rows和grid-auto-columns属性能够定义隐式的网格

　　默认值为auto

grid-template-rows:    70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:        140px;

　　在上面这个例子中咱们只定义了一行（轨道），因此item1和item2的高都是70px。第二行（轨道）自动建立了item3和item4空间。grid-auto-rows定义隐式网格中的行（轨道）的大小，所以item3和item4的高度是140px

隐式命名

【隐式命名网格区域名称】

　　一般能够将网格线命名成任何想命名的名称，若是网格线名称添加-start和-end的后缀，其实也隐式的建立一个网格区域，能够用来设置网格项目的位置

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

　　在这个示例中，行和列都具备inner-start和inner-end网格线名称，同时也对应的建立一个隐式网格区域名称inner

grid-area: inner

　　网格项目定位能够经过网格区域名称来设置，而不须要使用网格线名称

【隐式命名网格线名称】

　　隐式的指定网格线反向指定了隐式的网格区域名称，命名的网格区域隐式的命名了网格线名称 

grid-template-areas:   "header header" "content sidebar" "footer footer";
grid-template-rows:    80px 1fr 40px;
grid-template-columns: 1fr 200px;

　　指定网格区域会给网格区域边线添加隐式的网格线名称。这些网格线的命名是基于网格区域来命名，只是在网格区域名称的后面添加后缀-start或-end

grid-row-start: header-start; 
grid-row-end: content-start; 
grid-column-start: footer-start; 
grid-column-end: sidebar-end;

　　在这个示例中，header经过隐式的网格线名称设置其位置

 

网格项目层级

　　网格项目能够具备层级和堆栈，必要时可能经过z-index属性来指定 

.item-1,.item-2 {
    grid-row-start:  1;
    grid-column-end: span 2;
}
.item-1 { 
    grid-column-start: 1; 
    z-index: 1; 
}
.item-2 { 
    grid-column-start: 2 
}

　　在这个例子中，item1和item2的开始行都是1，item1列的开始是1，item2列的开始是2，而且它们都跨越两列。两个网格项目都是由网格线数字定位，结果这两个网格项目重叠了。

　　默认状况下，item2在item1上面，可是，咱们在item1中设置了z-index:1;，致使item1在item2之上

对齐

【网格项目对齐方式（Box Alignment）】

　　CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。

【justify-items】

【justify-self】

　　justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

　　justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受如下属性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

【网格轨道对齐方式】

　　网格轨道对齐能够相对于网格容器行和列轴。

　　align-content指定网格轨道沿着行轴对齐方式；justify-content指定网格轨道沿着列轴对齐方式。它们支持下面属性：

normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline