CSS - 响应式布局（二）响应式栅格系统

淡淡的烟草味﹌ 2023-09-27 09:17 145阅读 0赞

**目录**

响应式栅格系统

栅格

栅格系统

响应式栅格系统

BootStrap响应式栅格系统

简单说明

利用SCSS实现BootStrap的响应式栅格系统

--------------------

## 响应式栅格系统 ##

### 栅格 ###

在弄清楚响应式栅格系统前，我们需要先弄明白什么是栅格？

栅格，也可以叫做网格，是一种最常用的网页布局方式，采用栅格布局的网页最明显的特点就是：网页呈现网格化，卡片化。

那么什么是网格化、卡片化的网页呢？请看下面几个例子：

下面例子中，每个红框就是一个卡片，或者说是网格中的一个单元格

![26be29375a264a7a86138c04822b2484.png][]

![fd6a06955a694726bfc2fa7181ea0795.png][]

采用栅格布局，给人的感觉就是条理清晰，泾渭分明，非常适合做信息分类展示。

栅格布局是一种典型的行列式布局，即有行有列，而实现有行有列的布局，最好的方式就是grid布局

[CSS - 网格布局（grid）\_伏城之外的博客-CSDN博客\_css grid 网格布局][CSS - _grid_-CSDN_css grid]

虽然flex布局也能实现换行布局，但是flex布局本质是一维布局，它无法简单地实现二维布局中单元格的跨行跨列。

### 栅格系统 ###

我认为栅格和栅格系统还是有区别的，区别如下面代码：

栅格：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          div {
            box-sizing: border-box;
            border: 1px solid black;
          }
    
          /* 栅格 */
          .grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 1fr;
          }
    
          .grid > div:nth-child(1) {
            grid-column: span 3;
          }
    
          .grid > div:nth-child(2) {
            grid-column: span 3;
          }
    
          .grid > div:nth-child(3) {
            grid-column: span 6;
          }
        </style>
      </head>
    
      <body>
        <div class="grid">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
      </body>
    </html>

栅格系统：

/* grid.css */
    .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 1fr;
    }
    
    .col-1 {
      grid-column: span 1;
    }
    .col-2 {
      grid-column: span 2;
    }
    .col-3 {
      grid-column: span 3;
    }
    .col-4 {
      grid-column: span 4;
    }
    .col-5 {
      grid-column: span 5;
    }
    .col-6 {
      grid-column: span 6;
    }
    .col-7 {
      grid-column: span 7;
    }
    .col-8 {
      grid-column: span 8;
    }
    .col-9 {
      grid-column: span 9;
    }
    .col-10 {
      grid-column: span 10;
    }
    .col-11 {
      grid-column: span 11;
    }
    .col-12 {
      grid-column: span 12;
    }

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./grid.css">
        <style>
          div {
            box-sizing: border-box;
            border: 1px solid black;
          }
        </style>
      </head>
    
      <body>
        <div class="row">
          <div class="col-3">1</div>
          <div class="col-3">2</div>
          <div class="col-6">3</div>
        </div>
      </body>
    </html>

我们可以发现栅格系统其实就是将常用的栅格布局归纳整理为 样式类，这样的好处是，当用户需要进行栅格布局时，只要引入栅格系统，使用对应的栅格系统样式类即可完成栅格布局，而不是去写底层栅格布局样式。

### 响应式栅格系统 ###

前面学习响应式布局时

[CSS - 响应式布局（一）媒体查询\_伏城之外的博客-CSDN博客][CSS - _-CSDN]

我们给响应式布局下过定义：

所谓响应式布局，即监听浏览器视觉视口宽度的变化，当浏览器视觉视口宽度变化到一定程度或一定范围内时，网页的布局就改变，即网页采用另一套样式。

而实现响应式布局最好的方式就是：媒体查询。

因此，响应式栅格系统的含义就是：针对不同范围的视口宽度，定制多套栅格系统样式，举个例子，非响应式栅格系统中只需要.col-\*类，而响应式栅格系统需要有.col-xs-\*、.col-sm-\*、.col-md-\*、.col-lg-\*多个类。

## BootStrap响应式栅格系统 ##

### 简单说明 ###

说到响应式布局，就不得不提大名鼎鼎的BootStrap，而说到BootStrap，就不得不提响应式栅格系统。响应式栅格系统是BootStrap的核心，可以说，不学BootStrap的响应式栅格系统，等于没学BootStrap。

[全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)][CSS _ _ Bootstrap v3 _ _ Bootstrap _ _bootcss.com]

我们可以通过上面的网址来学习BootStrap响应式栅格系统的使用，主要学习点就是：

*  .container和.container-fluid
 *  .row
 *  .col-?\-\*
 *  .row-no-gutters
 *  列偏移：.col-?\-offset-\* 
 *  列排序：.col-?\-push-\*、.col-?\-pull-\*
 *  嵌套列

【?可以是 xs、sm、md、lg， \* 可以是 1~12中任意数字】

### 利用SCSS实现BootStrap的响应式栅格系统 ###

由于BootStrap3采用的是浮动布局（列浮动排于一行）实现的栅格系统，因此存在诸多问题，

比如需要大量使用伪元素进行清除浮动

![f3e1426be8c84f0e8b2e2a2334c62b1e.png][]

比如同一行中各列的高不相等

![9c2ba067fd494190bacf103d5336b6fd.png][]

而如果我们使用grid布局，将不存在这些问题，并且在实现上将更加简单，但是grid布局实现响应式栅格系统和BootStrap在细节上会有差别：

*  首先是列间距，BootStrap3采用的是列元素加左右15px固定宽度的padding，这样列与列之间就有30px的间距，而.container容器本身也有左右15px固定宽度的padding，因此两端的列与容器之间也应该有30px的间距，但是为了美观，.row加了左右-15px的margin，来让两端列的15px padding与容器的左右15px padding重合。这种实现是较为复杂的，且列元素本身的padding将不能清晰改动，否则会影响美观。而基于grid布局的栅格容器，本身就有column-gap样式来控制列间距，且只会产生列与列之间的间距，而不会产生列与容器之间的间距，另外column-gap不属于列元素的盒子模型，因此列元素的padding可以留作己用。
 *  其次是，列偏移和列排序，BootStrap3实现方式是变更列元素的左右margin，来让列元素实现水平偏移，但是在grid布局中，并不适用这种方式，因此基于grid的响应式栅格没有实现.col-xs-offset-\*，以及.col-xs-push-\*、.col-xs-pull-\*，而是用.col-xs-start-\*来代替。这里grid网格每一行都默认有12列，第一列的相当于.col-xs-start-1，.col-xs-md-1，第二列相当于.col-xs-start-2，.col-xs-md-1，....，第12列相当于.col-xs-start-12，.col-xs-md-1，这种其实可以算是列定位，可以实现和列偏移相同的效果。另外，在一行上的列排序，需要给行元素.row再加上.row-dense样式类，来让grid网格容器变为密集模式。

具体例子可以请看github：

[qwx427219/css-responsive-grid-system: 模拟实现BootStrap3的响应式栅格系统 (github.com)![icon-default.png_t_M85B][]https://github.com/qwx427219/css-responsive-grid-system][qwx427219_css-responsive-grid-system_ _BootStrap3_ _github.com_icon-default.png_t_M85B_https_github.com_qwx427219_css-responsive-grid-system]![dd0956392fde4a83829b8326a81a0df9.png][]

响应式栅格系统实现如下代码

// _comm.scss
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-size: 14px
    }
    
    // _variables.scss
    $infix-breakpoints-width: (
      xs: 0 100%,
      sm: 768px 750px,
      md: 992px 970px,
      lg: 1200px 1170px
    );
    
    $gutter: 30px;
    
    $columns: 12;
    
    // responsive-grid.scss
    .row {
      width: 100%;
    
      display: grid;
      grid-template-columns: repeat($columns, 1fr);
      grid-template-rows: 1fr;
      column-gap: $gutter;
    }
    
    .row > * {
      grid-column-end: span 12;
    }
    
    .row-no-gutters {
      column-gap: 0;
    }
    
    .row-dense {
      grid-auto-flow: row dense;
    }
    
    $infixs: map-keys($infix-breakpoints-width);
    $half-gutter: div($gutter, 2);
    
    .container-fluid {
      width: 100%;
      padding: 0 $half-gutter;
    }
    
    @each $infix in $infixs {
      $breakpoints-width: map-get($infix-breakpoints-width, $infix);
      $p: nth($breakpoints-width, 1);
      $w: nth($breakpoints-width, 2);
    
      @media screen and (min-width: $p) {
        .container {
          width: $w;
    
          @if $infix  !=xs {
            margin: 0 auto;
          }
          padding: 0 $half-gutter;
        }
    
        @for $i from 1 through $columns {
          .col-#{$infix}-#{$i} {
            grid-column-end: span #{$i} !important;
          }
    
          .col-#{$infix}-start-#{$i} {
            grid-column-start: $i !important;
          }
        }
      }
    }

下面实战一下BootStrap3官网首页：[Bootstrap中文网 (bootcss.com)][Bootstrap_ _bootcss.com]

![b74c89497ed644838b13ba448383352a.gif][]

源码获取请访问

[26be29375a264a7a86138c04822b2484.png]: https://img-blog.csdnimg.cn/26be29375a264a7a86138c04822b2484.png
[fd6a06955a694726bfc2fa7181ea0795.png]: https://img-blog.csdnimg.cn/fd6a06955a694726bfc2fa7181ea0795.png
[CSS - _grid_-CSDN_css grid]: https://blog.csdn.net/qfc_128220/article/details/125684405?spm=1001.2014.3001.5501
[CSS - _-CSDN]: https://blog.csdn.net/qfc_128220/article/details/126533393?spm=1001.2014.3001.5501
[CSS _ _ Bootstrap v3 _ _ Bootstrap _ _bootcss.com]: https://v3.bootcss.com/css/#grid
[f3e1426be8c84f0e8b2e2a2334c62b1e.png]: https://img-blog.csdnimg.cn/f3e1426be8c84f0e8b2e2a2334c62b1e.png
[9c2ba067fd494190bacf103d5336b6fd.png]: https://img-blog.csdnimg.cn/9c2ba067fd494190bacf103d5336b6fd.png
[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[qwx427219_css-responsive-grid-system_ _BootStrap3_ _github.com_icon-default.png_t_M85B_https_github.com_qwx427219_css-responsive-grid-system]: https://github.com/qwx427219/css-responsive-grid-system
[dd0956392fde4a83829b8326a81a0df9.png]: https://img-blog.csdnimg.cn/dd0956392fde4a83829b8326a81a0df9.png
[Bootstrap_ _bootcss.com]: https://www.bootcss.com/
[b74c89497ed644838b13ba448383352a.gif]: https://img-blog.csdnimg.cn/b74c89497ed644838b13ba448383352a.gif
[b7ff54303e6d40d797571b88738510d8.png]: https://img-blog.csdnimg.cn/b7ff54303e6d40d797571b88738510d8.png