HTML的grid教学,Grid布局方式的实例详解

前面的话

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

引入

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

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

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

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

4、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只定义了三列的大小，它们也分别放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3宽度。item1、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

<