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

    目录

    响应式栅格系统

    栅格

    栅格系统

    响应式栅格系统

    BootStrap响应式栅格系统

    简单说明

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

    响应式栅格系统

    栅格

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

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

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

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

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

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

    CSS - 网格布局（grid）_伏城之外的博客-CSDN博客_css grid 网格布局

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

    栅格系统

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

    栅格：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       div {
    10.         box-sizing: border-box;
    11.         border: 1px solid black;
    12.       }
    13.  
    14.       /* 栅格 */
    15.       .grid {
    16.         display: grid;
    17.         grid-template-columns: repeat(12, 1fr);
    18.         grid-template-rows: 1fr;
    19.       }
    20.  
    21.       .grid > div:nth-child(1) {
    22.         grid-column: span 3;
    23.       }
    24.  
    25.       .grid > div:nth-child(2) {
    26.         grid-column: span 3;
    27.       }
    28.  
    29.       .grid > div:nth-child(3) {
    30.         grid-column: span 6;
    31.       }
    32.     style>
    33.   head>
    34.  
    35.   <body>
    36.     <div class="grid">
    37.       <div>1div>
    38.       <div>2div>
    39.       <div>3div>
    40.     div>
    41.   body>
    42. html>

    栅格系统：

    1. /* grid.css */
    2. .row {
    3.   display: grid;
    4.   grid-template-columns: repeat(12, 1fr);
    5.   grid-template-rows: 1fr;
    6. }
    7.  
    8. .col-1 {
    9.   grid-column: span 1;
    10. }
    11. .col-2 {
    12.   grid-column: span 2;
    13. }
    14. .col-3 {
    15.   grid-column: span 3;
    16. }
    17. .col-4 {
    18.   grid-column: span 4;
    19. }
    20. .col-5 {
    21.   grid-column: span 5;
    22. }
    23. .col-6 {
    24.   grid-column: span 6;
    25. }
    26. .col-7 {
    27.   grid-column: span 7;
    28. }
    29. .col-8 {
    30.   grid-column: span 8;
    31. }
    32. .col-9 {
    33.   grid-column: span 9;
    34. }
    35. .col-10 {
    36.   grid-column: span 10;
    37. }
    38. .col-11 {
    39.   grid-column: span 11;
    40. }
    41. .col-12 {
    42.   grid-column: span 12;
    43. }
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./grid.css">
    9.     <style>
    10.       div {
    11.         box-sizing: border-box;
    12.         border: 1px solid black;
    13.       }
    14.     style>
    15.   head>
    16.  
    17.   <body>
    18.     <div class="row">
    19.       <div class="col-3">1div>
    20.       <div class="col-3">2div>
    21.       <div class="col-6">3div>
    22.     div>
    23.   body>
    24. html>

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

    响应式栅格系统

    前面学习响应式布局时

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

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

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

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

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

    BootStrap响应式栅格系统

    简单说明

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

    全局 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采用的是浮动布局（列浮动排于一行）实现的栅格系统，因此存在诸多问题，

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

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

    而如果我们使用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)https://github.com/qwx427219/css-responsive-grid-system

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

    1. // _comm.scss
    2. * {
    3.   margin: 0;
    4.   padding: 0;
    5.   box-sizing: border-box;
    6. }
    7.  
    8. body {
    9.   font-size: 14px
    10. }
    11.  
    12. // _variables.scss
    13. $infix-breakpoints-width: (
    14.   xs: 0 100%,
    15.   sm: 768px 750px,
    16.   md: 992px 970px,
    17.   lg: 1200px 1170px
    18. );
    19.  
    20. $gutter: 30px;
    21.  
    22. $columns: 12;
    23.  
    24. // responsive-grid.scss
    25. .row {
    26.   width: 100%;
    27.  
    28.   display: grid;
    29.   grid-template-columns: repeat($columns, 1fr);
    30.   grid-template-rows: 1fr;
    31.   column-gap: $gutter;
    32. }
    33.  
    34. .row > * {
    35.   grid-column-end: span 12;
    36. }
    37.  
    38. .row-no-gutters {
    39.   column-gap: 0;
    40. }
    41.  
    42. .row-dense {
    43.   grid-auto-flow: row dense;
    44. }
    45.  
    46. $infixs: map-keys($infix-breakpoints-width);
    47. $half-gutter: div($gutter, 2);
    48.  
    49. .container-fluid {
    50.   width: 100%;
    51.   padding: 0 $half-gutter;
    52. }
    53.  
    54. @each $infix in $infixs {
    55.   $breakpoints-width: map-get($infix-breakpoints-width, $infix);
    56.   $p: nth($breakpoints-width, 1);
    57.   $w: nth($breakpoints-width, 2);
    58.  
    59.   @media screen and (min-width: $p) {
    60.     .container {
    61.       width: $w;
    62.  
    63.       @if $infix  !=xs {
    64.         margin: 0 auto;
    65.       }
    66.       padding: 0 $half-gutter;
    67.     }
    68.  
    69.     @for $i from 1 through $columns {
    70.       .col-#{$infix}-#{$i} {
    71.         grid-column-end: span #{$i} !important;
    72.       }
    73.  
    74.       .col-#{$infix}-start-#{$i} {
    75.         grid-column-start: $i !important;
    76.       }
    77.     }
    78.   }
    79. }

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

    源码获取请访问

    qwx427219/css-responsive-grid-system: 模拟实现BootStrap3的响应式栅格系统 (github.com)https://github.com/qwx427219/css-responsive-grid-system 

  • 相关阅读:
    告别BeanUtils，Mapstruct从入门到精通
    【C/C++】类型转换
    .Net 中间件 - 新开源代码生成器 -ReZero
    面试：Fragment懒加载
    与归并排序相关的一些问题
    K线形态识别_身怀六甲和十字胎
    Web3.0世界知识体系分享-什么是Web3.0
    天然气下游大数据技术研究与应用综述
    Hadoop完全分布式搭建
    【JavaScript】-- 继承
  • 原文地址：https://blog.csdn.net/qfc_128220/article/details/126789777