网格布局介绍

96
剑有偏锋
2019.04.07 18:56 字数 346

一 网页的布局演变

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
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 响应式的列重置</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>test1</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>test2
         </p>        
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>test3
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>test4
         </p>
      </div>
   </div>
</div>

</body>
</html>
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,最终又将走向哪里?》

前端学习
Gupao