关于Grid网格布局的简单基础知识介绍

什么是网格布局？

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格布局 CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

网格布局的效果

像这样的布局

image

这样

image

又或者像这样照片墙的形式

image

网格布局常用的属性

网格容器是决定将网格分为几行几列，所以首先实现网格布局就要使该容器具有以下几个属性：

1、指定容器使用网格布局： display: grid

2、指定容器设为行内元素并使用网格布局：display: inline-grid

3、定义每一列的列宽：grid-template-columns

4、定义每一行的行高：grid-template-row

5、重复赋值：repeat(次数,值)

6、自动填充：如：repeat(auto-fill,30px)

7、比例：fr（如 grid-template-columns: 1fr 2fr;意思是容器分为2列，二列的宽度是一列的2倍)

8、长度范围：minmax()

9、自动填充剩余空间（不设置最大值最小值的情况下）：auto

10、网格线名称，同一根线可以有多个名称： grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

11、行间距：grid-row-gap

12、列间距：grid-column-gap

13、间距：grid-gap：行间距数值 列间距数值行间距和列间距数值相同可只写一个值

14、区域：b到h的分别对应七个区域。.表示第一个区域不用；h表示两个区域合并；每个区域的起始网格线自动命名为区域名-start，终止网格线自动命名为区域名-end；

grid-template-areas: '. b c'
                     'd e f'
                     'g h h';

15、填充顺序：grid-auto-flow默认是row，即先填满第一行再填下一行；也可设置为column变成先填满第一列再填第二列；row dense和column dense表示尽量填满不出现空白

16、单元格内容的水平位置、垂直位置；默认stretch，即填满整个单元格

justify-items: start | end | center | stretch;/*水平位置*/
align-items: start | end | center | stretch;/*垂直位置*/
place-items: '水平位置' '垂直位置';/*参数相同可只写一个值*/

17、内容块在网格容器的水平位置、垂直位置；默认stretch，即填满整个单元格

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
place-content:'水平位置' '垂直位置';/*参数相同可只写一个值*/
space-around  : 单元格两侧的间隔相等，是单元格与容器边框的间隔的两倍。
space-between : 单元格间隔相等，单元格与容器边框之间没有间隔。
space-evenly  : 单元格间隔和单元格与容器边框的间隔相等，。

18、指定项目外的单元格属性：grid-auto-columns ，grid-auto-rows
19、合并属性

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

20、项目根据网格线定位，可使用z-index

grid-column-start:2;
grid-column-end:3;
/*相当于*/
grid-column:2 / 3

grid-row-start:4;
grid-row-end :5;
/*相当于*/

21、指定项目放在哪一个区域: grid-area: a; grid-area: / / / ;

22、设置单元格内容的水平、垂直位置，只作用于单个项目
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;

本篇文章就是关于Grid网格布局的简单基础知识介绍，具有一定的参考价值，希望对需要的朋友有所帮助！

作者：是刘某啊
链接：https://www.jianshu.com/p/1f0c2e965770