B端响应式布局解决方案—— Grid 栅格布局应用详解

背景

如何想要不同尺寸的页面在不同尺寸的屏幕 🖥 都有比较美观的展示，在前端，特别是针对B端服务使用的响应式布局解决方案就是———grid 栅格布局也叫网格布局

一. 什么是栅格布局

栅格布局三大重要因素：列、水槽、页面边距

首先要了解，栅格系统三大重要因素：列、水槽、页面边距。列就是每一列的内容区域，水槽就是列之间的间隙，页面边距是内容区域距离页面的距离，如下图所示：

1. 定义列

一般PC端通常使用12列栅格，如果业务比较复杂，则可以使用24栅格。当前，也可以根据实际场景需要增加栅格数量，数量越多响应式约灵活，相应的版面被分割的会比较零碎。

2. 定义水槽宽度

水槽宽度一般使用4或者8的倍数，比如16px，20px，24px。一般推荐使用16px，间距适中。

3. 最后 定义触发页面布局的关键值

比如 672px，1056px，1312px等进行栅格数量删减。

二. 怎么理解响应式布局

响应式布局是确保一个页面当中所有的设备（桌面端、平板端、移动端）都能够展示出非常满意的效果，进行产生的一种技术方案。更像是 流式布局与自适应布局 的结合，它能够通过对屏幕尺寸的快速响应，进而对页面的内容进行更为细致的变化

通俗一点来说就是通过一套代码去实现多个页面，并且将多个页面的内容进行细化，进而能够快速适配多个设备，如下图：

对于多个设备，最主要是调整页面栅格数量、水槽宽度、页面距进行适应，比如在YouTube当中，就是通过响应式布局，让页面实时响应进行处理

三. 前端如何正确使用栅格布局

网格布局（Grid）是最强大的 CSS 布局方案

grid布局 和 flex布局的区别

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Grid 布局的基本使用

1. grid-template-columns 和 grid-template-rows 栅栏轨道的宽度和数量。

语法格式如下：

    grid-template-columns: <length> <length> <length>;// length用空格隔开，大小表示纵向栅格轨道的宽度，数量表示栅格轨道的数量

使用：

    display: grid; //设置容器布局：grid 或 inline-grid
    grid-template-columns: 100px 200px 30% //设置横向栅栏轨道的宽度和数量
    grid-template-rows:100px 200px 30% //设置纵向栅栏轨道的宽度和数量

2. column-gap、row-gap和 gap 间距属性

cloumn-gap: <length>; //定义各列之间的间距
row-gap: <length>; //定义各行之间的间距
gap: <row-gap> <cloumn-gap>; //复合属性，是cloumn-gap和row-gap属性的简写

如下：

3. 栅格线

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

基本语法格式：

    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];
    }

4. 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;
    }

得到

5. 栅格元素的排列规则

1、grid-auto-flow 定义栅格元素的排列规则

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

按行优先排列：

按列优先排列：

2、grid-auto-rows和grid-auto-columns 定义超出栅格容器范围的栅格元素的尺寸

grid-auto-rows用于定义高，grid-auto-columns用于定义宽。

四. 栅格布局的特性

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