网格布局介绍

一 网页的布局演变

1 表格布局 （table）
2 定位布局 （position: fixed、absolute等）
3 浮动布局（使用float）
4 Flexbox布局(使用display:flex,可自定义灵活布局， 是一维布局系统)
5 网格布局（使用display: grid; 是二维布局系统）

二 使用的主要原理

1 css grid标准的使用，先定义网格单元的宽高列表（grid-template-columns），精确定义元素从第几列开始，第几列结束（grid-column）。从第几行开始，第几行结束（ grid-row）。

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

.item-a在第 1 列网格线开始第 2 列网格线结束, .item-b在第 5 列网格线开始第 6 列网格线结束，但我们还没有定义第 5 或者第 6 列。因为我们引用的线不存在，0 宽度的隐式网格轨迹将被创建来填充这些空缺。

2 bootstrap的使用，把一个屏幕的平分为12列单位，可根据最小单位定义元素宽度，位移等。
内部实现了列宽单位的样式
.col-xs-x x为1~12，超小设备手机（<768px）
.col-sm-x 小型设备平板电脑（≥768px）
.col-md-x 中型设备台式电脑（≥992px）
.col-lg-x 中型设备台式电脑（≥992px）

image.png

    
   
     
   
   




   

      

         
test1
      
      

         
test2
         
        
      

      


      

         
test3
         
      
      

         
test4
         
      
   

test1、test2、test3、test4样式描述，col-sm-3 表示在手机显示时占3个单位， col-xs-6 小型设备平板电脑显示时占6个单位

三引用

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout 《CSS Grid Layout》
https://getbootstrap.com/docs/4.3/layout/grid/ 《 bootstrap gridsystem》
http://www.runoob.com/bootstrap/bootstrap-grid-system.html 《网格系统》
https://www.w3cplus.com/css/css-layout-model.html 《布局演变史》
https://panxu.net/article/8306.html 《Div+Css布局简史：从1.0到3.0，最终又将走向哪里？》