grid栅格布局

一、概述
二、grid布局的基本内容
- 1、术语
- 2、定义
- 3、grid-template-columns 属性，grid-template-rows 属性
- 4、cloumn-gap,row-gap和gap属性
- 5、grid-template-areas、grid-area
三、关键词和函数
- 1、repeat函数
- 2、minmax函数
- 3、fr关键字
- 4、auto关键字
- 5、auto-fill关键字
- 6、auto-fit关键字
- 7、min-content关键字和max-content关键字
四、对齐方式
- 1.justify-content、justify-items和justify-self属性
- 2.align-content、align-items和align-self属性
- 3.place-content、place-items和place-self属性
五、栅格线
- 1、定义
- 2、命名
- 3、grid-column-start，grid-column-end，grid-row-start,grid-row-end属性
- 4、grid-column和grid-row属性
- 5、gird-area属性是
六、栅格元素的排列规则
- 1、grid-auto-flow
- 2、grid-auto-rows和grid-auto-columns
七.grid属性
八、栅格布局的特性

一、概述

如果说flex是为一维布局而存在的，那么grid是为二维布局而存在的。

grid布局被称为栅格布局，也被称为网格布局，他可以将网页划分为许多个方格，我们可以在网格中填充自己的内容。

二、grid布局的基本内容

1、术语

如下图

栅格线：图中，横向或者纵向的一条线
栅格轨道：由两条相邻栅格线所包围的部分
栅格区域：由栅格线包围的矩形区域
栅格单元：最小的栅格区域
栅格元素：栅格单元中放置的元素

2、定义

指定容器采用网格结构通过指定它的display属性值为grid或inline-grid。
grid表示指示容器采用块级结构。
inline-gird表示容器采用行内结构。

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

3、grid-template-columns 属性，grid-template-rows 属性

grid-template-columns用于设置纵向栅栏轨道的宽度和数量。
其语法格式如下

grid-template-columns: <length> <length> <length>;

各length用空格隔开，其大小表示纵向栅格轨道的宽度，数量表示栅格轨道的数量。

其中，grid布局有一种特有的单位fr。fr表示占剩余空间的份额。如果我们想将上图的3和6单元单个占满剩余空间，则可以将其栅栏轨道的宽度设置为1fr。

如果想三个栅栏轨道均匀占满。则可如下图设置。

grid-template-rows的属性值描述与grid-template-columns同理。不再赘述。
其中对fr的描述略有区别。
如果栅栏容器的高度已经定义则grid-template-rows中的fr与grid-template-columns的语义相同。
如果没有定义，可以看如下图。

此时容器的高度没有定义，则将容器压缩到最小，则1fr代表的是1盒子的高度，2盒子是2fr，高度是1盒子的两倍。

4、cloumn-gap,row-gap和gap属性

属性	说明
cloumn-gap	定义各列之间的间距
row-gap	定义各行之间的间距
gap	复合属性，是cloumn-gap和row-gap属性的简写

基本语法：

cloumn-gap: <length>;
row-gap: <length>;
gap: <row-gap> <cloumn-gap>;

实例：

5、grid-template-areas、grid-area

gird-template-areas用于为栅格容器划分“区域”。grid-area为栅格元素指定所属区域。
通常grid-template-areas与grid-template-cloumns和grid-template-rows搭配使用。
grid-template-areas的基本语法：一行一行的定义区域，每一行用英文引号“ ‘’ ”括起来。

如下代码，划分五个区域：

.grid-container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'left top top''left middle right''bottom bottom right';
}

定义五个弹性元素

<div class="grid-container"><div class="left">left</div><div class="bottom">bottom</div><div class="right">right</div><div class="top">top</div><div class="middle">middle</div></div>

这时我们再指定五个弹性元素的所属。

.left{grid-area: left;}
.bottom{grid-area: bottom;}
.right{grid-area: right;}
.top{grid-area: top;}
.middle{grid-area: middle;}

再定义一下间距和颜色，就会得到如下布局。

值得注意的时，我们可以不使用grid-template-cloumns和grid-template-rows,而直接用grid-template-areas,不过此时各个区域的基本单元大小时一样的。

三、关键词和函数

1、repeat函数

基本语法：repeat( n, content)
其中n代表重复次数， content代表重复内容。
例如：

.grid-box
{grid-template-cloumns:100px 100px 100px 100px;grid-template-rows:100px 200px 100px 200px 300px 300px;
}

等价于

.grid-box
{grid-template-columns:repeat(4, 100px);grid-template-rows:repeat(2, 100px 200px) repeat(2, 300px);
}

2、minmax函数

用于产生一个长度范围，如果用minmax设置宽度，则宽度只能在该范围变化。
基本语法：minmax（<最小值>， <最大值>）。

3、fr关键字

fr关键词是fraction的缩写，意为片段，用于表示比例关系。如果一个设置为1fr，另一个设置为3fr，则表示后者的长度是前者的两倍。设置fr关键字时，栅格单元会尽可能的填充整个空间。

4、auto关键字

表示由浏览自己决定长度

5、auto-fill关键字

当栅格单元的大小固定，而栅格容器的大小不确定，可以设置auto-fill关键词，让每一行尽可能容纳更多的栅格单元

如下：

.grid-box
{display:grid;grid-template-columns: repeat(auto-fill, 300px);
}

当浏览器比较大时

缩小窗口时

6、auto-fit关键字

auto-fit关键字和auto-fill关键字很像，都是在每一行尽可能的容纳元素。后者是填充空白列来达到目的的，auto-fit是调整宽度来达到目的的

他们在其他内容使用fr关键字的时候会略有差异。

7、min-content关键字和max-content关键字

关键字	含义
min-content	尽量少占用空间，可以显示内容即可
max-content	尽可能占据内容所需要的最大空间

可以看到，左盒子只需要最长单词的长度即可，右盒子需要占据整个句子的长度。

四、对齐方式

1.justify-content、justify-items和justify-self属性

属性	说明
justify-content	设置栅格单元的水平位置
justify-items	设置栅格单元的内容的水平位置
justify-self	为栅格单元单独设置水平位置

在具体解释之前，先看以下图片

对于justify-content，设置的是红色块相对蓝色块的位置
对于justify-items, 设置的是黄色块相对红色块的位置
justify-self与justify-content的含义相同，前者针对为栅格单元的属性，后者为栅格容器的的属性。

对于justify-content的取值，如下

属性值	说明
start	对齐栅格容器的起始边
end	对齐容器的终止边
center	居中
stretch	默认值,拉伸至占据整个栅格容器
space-around	栅格单元均匀排放，与边框有间隔，且是栅格单元的间隔的一半
space-between	栅格单元均匀排放，与边框无间隔
space-evenly	栅格单元均匀排放，与边框有间隔，且与栅格单元间的间隔相同

而对于justify-items

属性值	说明
start	对齐栅格单元的起始边缘
end	对齐栅格单元的起始边缘
center	对齐栅格单元的结束边缘。
stretch	默认值，拉伸至占满整个栅格单元

限于篇幅，剩余属性值不再赘述。

2.align-content、align-items和align-self属性

本小结属性与上一节属性相似，属性值也相同，唯一的区别就是本节属性值是垂直方向，由此不在赘述。

3.place-content、place-items和place-self属性

place-content、place-items和place-self属性都是复合属性。
其基本语法如下。

place-content: <align-content> <justify-content>
place-items: <align-items> <justify-items>
place-self: <align-self> <justify-slef>

五、栅格线

1、定义

在栅格容器中，我们通过栅格线来划分栅格单元。从而达到布局的目的，其中栅格线有系统默认的名字，纵向上是1， 2， 3， 4……，横向上也是1， 2， 3， 4 ……。

2、命名

除了系统默认的名字外，我们可以自己给栅格线取额外的名字，其做法是在grid-template-colunms属性和grid-template-rows中的长度之间用”[]“包围自己想要的名字，多个名字用空格隔开。

基本语法

grid-template-colunms/grid-template-rows: [名字1 名字2] <长度> [名字3 名字4] <长度>；

设置如下代码

.grid-container:
{grid-template-columns:[first car] 1fr [two] 1fr [dog] 1fr [last key];grid-template-rows: [pop] 1fr [cup] 1fr [paper];
}

3、grid-column-start，grid-column-end，grid-row-start,grid-row-end属性

在我们了解了各个栅格线的名字后，就可以利用四个属性定位栅格元素的位置，以达到向放哪里就放哪里的目的。
grid-column-start用于定义定义栅格元素横向的起始栅格线，grid-column-end用于定义纵向的结束栅格线。
grid-row-start,grid-row-end分别用于定义纵向的起始栅格线和终止栅格线。

对于代码

.grid-container
{grid-template-columns:[first car] 1fr [two] 1fr [dog] 1fr [last key];grid-template-rows: [pop] 1fr [cup] 1fr [paper];
}.one{grid-column-start: first;grid-column-end: dog;grid-row-start: 1;grid-row-end: cup;}.two{grid-column-start: dog;grid-column-end: 4;grid-row-start: 1;grid-row-end: paper;}.three{grid-column-start: 1;grid-column-end: 3;grid-row-start: cup;grid-row-end: paper;}

得到

值得注意的是：

栅格元素之间可以相互重叠，可以修改其order属性(改变排列顺序)或者z-index属性（改变显示优先级）来改变重叠顺序。
当省略栅格元素的终止位置时，默认以起始位置的下一条栅格线为终止位置 .

4、grid-column和grid-row属性

上述两个属性都是复合属性，分别是grid-column-start，grid-column-end属性和grid-row-start,grid-row-end的简写形式。
基本语法

grid-column: grid-column-start / grid-column-end;
grid-row:grid-row-start /grid-row-end

grid-column: 1 / 2;
等价于
grid-column-start:1;
grid-column-end:2;

5、gird-area属性是

grid-area是grid-row-start，grid-column-start属性和grid-row-end,grid-column-end的简写形式。属性之间用”/“分割。

grid-area: 1 / 2 / 3 / 4;
等价于
grid-row-start: 1;
grid-column-star:2;
grid-row-end: 3;
grid-column-end: 4;

六、栅格元素的排列规则

1、grid-auto-flow

grid-auto-flow属性用于定义栅格元素的排列规则

属性值	说明
row	默认值，按行优先的方式排列
column	按列优先的方式排列
row dense	按行优先的方式紧密排列
column dense	按列优先的方式紧密排列

在对五号栅格元素使用了如下代码后

.five
{grid-column: 1 / 3;
}

这时把栅格容器的grid-auto-flow改为row-dense

2、grid-auto-rows和grid-auto-columns

这两个元素用于定义超出栅格容器范围的栅格元素的尺寸，grid-auto-rows用于定义高，grid-auto-columns用于定义宽。

七.grid属性

grid属性是复合属性
由
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
组成，用的比较少，这里不详细讲解。

八、栅格布局的特性

栅格元素不会受到浮动的影响
栅格容器不是BFC，其中的栅格元素不会发生折叠的现象

grid栅格布局详解相关推荐

CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...
CSS Grid 网格布局详解
目录一:Grid简介二:基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线三:容器属性 3.1 display 属性 3.2.grid-template-columns ...
grid layout网格布局详解
grid layout网格布局详解什么是grid layout grid的特点 grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位fr repeat函数 ...
tkinter-grid布局详解
前文tkinter-pack布局详解介绍了pack布局,相信对tkinter的布局套路有了一定的了解.本文将介绍另一种布局类grid. 同样,展示布局类与控件类的类间关系: 文章目录 grid 默认分 ...
html栅格系统格式,Bootstrap的栅格系统是什么？栅格系统详解
本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...
【C++】C++对象模型：对象内存布局详解（C#实例）
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
Linux进程地址空间与进程内存布局详解，内核空间与用户空间
Linux进程地址空间与进程内存布局详解程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...

grid栅格布局详解