2020-05-18CSS9 分钟读完 (大约 1288 个字)

bootstrap grid布局

grid布局概念

grid原生布局

写法

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

.container {
  height: 500px;
  border: 1px red solid;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
.container>div {
  border: 1px green solid;
}

简写1

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

也可以写为：

.container {
  height: 500px;
  border: 1px red solid;
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
}

简写2

.container {
  display: grid;
  grid-template-columns: 100px 200px 300px 100px 200px 300px;
}

也可以写为：

.container {
  display: grid;
  grid-template-columns: repeat(2,100px 200px 300px);
}

auto-fill关键字

auto-fill关键字可以使得.container容器内部columns以一定的宽度自动填充满。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill,100px);
}

fr关键字(fr:fraction片段)

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

fr可以与绝对长度的单位结合使用，这时会非常方便。

例如：

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  /*第一列的宽度为150像素，第二列的宽度是第三列的一半。*/
}

minmax()函数

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr minmax(100px,1fr);
}

auto关键字

.container {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
}

指定网格线名字

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 200px [c3] 300px [c4] 400px [c5];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
}

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

布局实例

两栏布局：

.container {
  display: grid;
  grid-template-columns: 70% 30%;
}

十二网格布局：

.container {
  display: grid;
  grid-template-columns: repeat(12,1fr);
}

gap间隔

旧属性名：

grid-column-gap

grid-row-gap

grid-gap

新属性名：

column-gap

row-gap

gap

行列单独设置：

.container {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 30px;
}

一起设置：

.container {
  display: grid;
  grid-gap: 20px 30px;
}

如果grid-gap只有一个值，则行列都为这个值。

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

grid-template-areas属性

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {
  display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下。

.container {
  grid-template-areas: 'a a a'
                     	 'b b b'
                       'c c c';
}

上面代码将9个单元格分成a、b、c三个区域。

布局实例：

.container {
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";
}

上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

如果某些区域不需要利用，则使用”点”（.）表示。

.container {
  grid-template-areas: 'a a a'
                     	 'b . b'
                       'c c c';
}

上面代码中，中间为点，表示没有用到该单元格，或者该单元格不属于任何区域

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

grid-auto-flow属性

默认值是row，即”先行后列”。也可以将它设成column，变成”先列后行”。

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

使用bootstrap进行grid布局

使用bootstrap基本模版：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://gcore.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://gcore.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://gcore.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://gcore.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap布局（记忆）

容器需要将class设置为container（带宽度），或者container-fluid（100%宽度），bootstrap中一行最多12列。

参考文章

1.阮一峰grid教程