Neo笔记文档

主题

第十一章 GRID 栅格系统 ​

A.栅格介绍 ​

1.栅格系统和摆家具一样的思路 ​

2.栅格系统和表格好像 ​

3.生产环境栅格系统面临的局面 ​

B.基本知识 ​

3.5 基本知识 ​

Terms:行，列，单元格，栅格线，区域

C.声明容器 ​

4.声明栅格系统的容器 ​

Terms:display: grid

  • display: grid; 声明容器, 块级
  • display: inline-grid; 声明行内容器

4.1 块级容器 ​

html
<style>
  * {
  padding: 0;
  margin: 0;
 }

 body {
  padding: 200px;
 }

 article {
  width: 400px;
  height: 200px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 25% 25% 25% 25%;
 }

 article div {
  background: blueviolet;
  background-clip: content-box;
  padding: 10px;
  border: solid 1px #ddd;
 }
</style>

hd
<article>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</article>

4.2 行级容器 ​

html
<style>
 display: inline-grid;
</style>

D.划分行列 ​

5.栅格绘制基础知识 ​

Terms:grid-template-rows,grid-template-columns

  • 划分行列:栅格有点类似表格，也 行 和 列。使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。

5.1 固定宽度 ​

  • 下面是使用固定宽度划分两行三列的的示例，当容器宽度过大时将漏白。
html
<style>
 * {
  padding: 0;
  margin: 0;
 }
 body {
  padding: 200px;
 }
 article {
  width: 300px;
  height: 200px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px 100px;
 }
 article div {
  background: blueviolet;
  background-clip: content-box;
  padding: 10px;
  border: solid 1px #ddd;
 }
</style>

<article>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</article>

5.2 百分比 ​

  • 可以使用使用百分比自动适就容器。
html
<style>
 display: grid;
 grid-template-rows: 50% 50%;
 grid-template-columns: 25% 25% 25% 25%;
</style>

6.重复绘制栅格结构 ​

Terms:repeat

  • 使用  repeat  统一设置值，第一个参数为重复数量，第二个参数是重复值
html
<style>
 grid-template-rows: repeat(2, 50%);
 grid-template-columns: repeat(2, 50%);
</style>

  • 可以设置多个值来定义重复，下面定义了四列，以 100%、20px 重复排列。
html
<style>
 display: grid;
 grid-template-rows: repeat(2, 50%);
 grid-template-columns: repeat(2, 100px 50px);
</style>

7.自动填充与按比例划分栅格 ​

Terms: auto-fill

7.1 自动填充 ​

html
<style>
 width: 300px;
 height: 200px;
 display: grid;
 grid-template-rows: repeat(auto-fill, 100px);
 grid-template-columns: repeat(auto-fill, 100px);
</style>

7.2 比例划分 ​

  • 使用 fr 单位设置元素在空间中所占的比例，下面按 1 份-2 份 分成两组共四列。
html
<!-- 单位组合 -->
<style>
 width: 300px;
 height: 200px;
 display: grid;
 grid-template-rows: 1fr 2fr;
 grid-template-columns:
  100px 1fr
  2fr;
</style>

html
<!-- 重复定义 -->
<style>
 width: 300px;
 height: 100px;
 display: grid;
 grid-template-rows: repeat(2, 1fr);
 grid-template-columns: repeat(2, 1fr 2fr);
</style>

7.3 自动空间 ​

  • 下面为第二个栅格列使用 auto 来让其获取所有剩余空间
html
<style>
 main {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 20vw auto 30vw;
 }
 div {
  background: blueviolet;
  border: solid 1px #ddd;
  color: white;
  padding: 5px;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS.COM</div>
</main>

7.4 组合定义 ​

  • grid-tempalte 是 grid-template-rows、grid-template-columns、grid-template-areas 的三个属性的简写。
html
<!-- 下面使用grid-template实现三行三列的布局 -->
<style>
 .app {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  width: 300px;
  height: 300px;
 }

 .app > div {
  border: solid 1px red;
  box-sizing: border-box;
 }
</style>
<div class="app">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

html
<!-- 下面是使用 grid-template 同时声明 grid-template-rows、grid-template-columns。 -->
<style>
 main {
  display: grid;
  grid-template: 10vh 20vh 10vh/ 30vw 1fr;
 }
 div {
  background: blueviolet;
  border: solid 1px #ddd;
  color: white;
  padding: 5px;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS.COM</div>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS.COM</div>
</main>

html
<!-- 下面是使用grid-template 定义 grid-template-areas ，有关grid-template-areas的使用方法会在下面介绍。 -->
<style>
 main {
  display: grid;
  grid-template:
   "header . ." 10vh
   ". main ." 20vh
   "footer footer ." 10vh;
 }
 div {
  background: blueviolet;
  border: solid 1px #ddd;
  color: white;
  padding: 5px;
 }
 div:nth-child(2) {
  grid-area: 2/2/3/4;
  background-color: cadetblue;
 }
 div:nth-child(3) {
  grid-area: 3/1/4/2;
  background-color: darkorange;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS.COM</div>
</main>

8.minmax 控制尺寸波动范围 ​

Terms:minmax

html
<style>
 width: 300px;
 height: 300px;
 display: grid;
 grid-template-rows: 100px minmax(100px, 1fr);
 grid-template-columns: 100px 1fr;
</style>

E.间距定义 ​

9.用栅格间距控制留白 ​

Terms:row-gap,column-gap,gap

9.1 行间距 ​

  • 使用 row-gap 设置行间距。
html
<style>
 width: 300px;
 height: 200px;
 display: grid;
 grid-template-rows: repeat(2, 1fr);
 grid-template-columns: repeat(3, 1fr);
 row-gap: 30px;
</style>

9.2 列间距 ​

  • 使用 column-gap 定义列间距。
html
<style>
 width: 300px;
 height: 200px;
 display: grid;
 grid-template-rows: repeat(2, 1fr);
 grid-template-columns: repeat(3, 1fr);
 column-gap: 20px;
</style>

9.3 组合定义 ​

  • 使用 gap 规则可以一次定义行、列间距，如果间距一样可以只设置一个值。
html
<!-- 设置行列间距为 20px 与 10px -->
<style>
 width: 300px;
 height: 200px;
 display: grid;
 grid-template-rows: repeat(2, 1fr);
 grid-template-columns: repeat(3, 1fr);
 gap: 20px 10px;
</style>

html
<!-- 统一设置行列间距为 20px -->
<style>
 gap: 20px;
</style>

10.根据栅格线编号放置元素 ​

10.1 栅格命名 ​

  • 栅格线可以使用命名与编号找到，方便控制指定栅格，或将内容添加到指定栅格中。

11.小米界面不规则元素布局 ​

html
<style>
    article {
      width: 300px;
      height: 300px;
      border: solid 5px silver;
      display: grid;
      grid-template: repeat(2, 1fr)/repeat(2, 1fr);
    }

    div {
      background-color: blueviolet;
      background-clip: content-box;
      border: 1px solid silver;
      padding: 10px;
      box-sizing: border-box;
    }

    div:nth-child(1) {
      grid-row-start: 1;
      grid-column-start: 1;
      grid-row-end: 3;
      grid-column-end: 2;
    }
  </style>
</head>
<body>
  <article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </article>
</body>

F.栅格命名 ​

12.栅格固定命名放置元素 ​

Terms:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end]

  • 独立命名:可以为每个栅格独立命名来进行调用。
html
<style>
 * {
  padding: 0;
  margin: 0;
 }

 body {
  padding-top: 50px;
 }

 article {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];

  grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
  color: white;
 }

 div:first-child {
  grid-row-start: r2-start;
  grid-column-start: c1-end;
  grid-row-end: r2-end;
  grid-column-end: c3-start;
 }
</style>

<article>
 <div>hd</div>
</article>

13.重复栅格的命名技巧 ​

Term:repeat(3, [r-start] 100px [r-end])

  • 自动命名:对于重复设置的栅格系统会自动命名，使用时使用 c 1、c 2 的方式定位栅格。
html
<style>
 article {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
 }

 div:first-child {
  grid-row-start: r1-end;
  grid-column-start: c2-start;
  grid-row-end: r3-start;
  grid-column-end: c3-start;
 }
</style>

<article>
 <div>houdunren</div>
</article>
html
<style>
 article {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: repeat(3, [r-start] 100px [r-end]);
  grid-template-columns: repeat(3, [c-start] 100px [c-end]);
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
  color: white;
 }

 div:first-child {
  grid-row-start: r-start 2;
  grid-column-start: c-start 2;
  grid-row-end: r-start 2;
  grid-column-end: c-end 2;
 }
</style>

<article>
 <div>houdunren</div>
</article>

G.元素定位 ​

14.根据偏移量定位元素 ​

Terms:span

样式属性说明
grid-row-start行开始栅格线
grid-row-end行结束栅格线
grid-column-start列开始栅格线
grid-column-end列结束栅格线
  • 上面几个样式属性可以使用以下值
属性值说明
Line栅格络
span 数值栅格包含的栅格数量
span 区域名称栅格包含到指定的区域名称
auto自动设置，默认为一个网格宽度和高度

14.1 根据栅格线 ​

  • 通过设置具体的第几条栅格线来设置区域位置，设置的数值可以是正数和负数
html
<style>
 * {
  padding: 0;
  margin: 0;
 }

 body {
  padding-left: 200px;
  padding-top: 200px;
 }

 article {
  border: solid 5px blueviolet;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
 }

 article div {
  background: blueviolet;
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color: white;
 }
</style>

<article>
 <div>hd</div>
</article>

14.2 根据栅格命名 ​

html
<style>
 article {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
 }

 div:first-child {
  grid-row-start: r1-end;
  grid-column-start: c2-start;
  grid-row-end: r3-start;
  grid-column-end: c3-start;
 }
</style>
...

<article>
 <div>houdunren</div>
</article>

14.3 根据自动命名 ​

html
<style>
 article {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: repeat(3, [r-start] 100px [r-end]);
  grid-template-columns: repeat(3, [c-start] 100px [c-end]);
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
  color: white;
 }

 div:first-child {
  grid-row-start: r-start 2;
  grid-column-start: c-start 2;
  grid-row-end: r-start 2;
  grid-column-end: c-end 2;
 }
</style>

<article>
 <div>houdunren</div>
</article>

14.4 根据偏移量 ​

  • 使用 span 可以设置包含栅格的数量或包含到的区域名称。
示例说明
grid-row-end:2向下包含 2 行
grid-row-start:2向上包含 2 行
grid-column-end:2向右包含 2 行
grid-column-start:2向左包含 2 行
html
<style>
 article {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
  color: white;
  font-size: 25px;
 }

 div:first-child {
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: span 1;
  grid-column-end: span 1;
 }
</style>

<article>
 <div></div>
</article>

15.元素定位简写操作 ​

Term:grid-row,grid-column

15.1 简写模式 ​

  • 可以使用  grid-row设置行开始栅格线，使用  grid-column设置结束栅格线。
  • 上例中的居中对齐元素，可以使用以下简写的方式声明（推荐）。
html
<style>
 grid-row: 2/4;
 grid-column: 2/4;
</style>

15.2 grid-area ​

  • grid-area 更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。
  • 语法结构:grid-row-start/grid-column-start/grid-row-end/grid-column-end
html
<!-- 下面是将元素定位在中间的示例。 -->
<style>
 * {
  padding: 0;
  margin: 0;
 }

 body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
 }

 header {
  grid-area: 2/2/3/3;
  background: #e67e22;
 }
</style>

<body>
 <header></header>
</body>

16.开发 bootstrap 栅格系统 ​

  • 下面是 bootstrap 栅格系统的开发，根据指定的样式自动设置栅格大小。
html
<style>
 * {
  padding: 0;
  margin: 0;
 }

 body {
  padding-top: 200px;
 }

 .container {
  margin: 0 auto;
  border: solid 5px silver;
  width: 1020px;
  height: 320px;
 }

 .row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px 10px;
 }

 div {
  background: blueviolet;
  height: 100px;
  background-clip: content-box;
  padding: 10px;
  box-sizing: border-box;
  border: solid 1px blueviolet;
  font-size: 35px;
 }

 .c-1 {
  grid-column: span 1;
 }

 .c-2 {
  grid-column-end: span 2;
 }

 .c-3 {
  grid-column-end: span 3;
 }

 .c-4 {
  grid-column-end: span 4;
 }

 .c-5 {
  grid-column-end: span 5;
 }

 .c-6 {
  grid-column-end: span 6;
 }

 .c-7 {
  grid-column-end: span 7;
 }

 .blue {
  background: #904fa9;
 }

 .green {
  background: #eebc31;
 }
</style>

<article class="container">
 <section class="row">
  <div class="c-1 blue">1</div>
  <div class="c-3 blue">3</div>
  <div class="c-6 blue">6</div>
  <div class="c-2 blue">2</div>
 </section>
 <section class="row">
  <div class="c-4 green">4</div>
  <div class="c-4 green">4</div>
  <div class="c-4 green">4</div>
 </section>
</article>

H.区域定位 ​

17.使用栅格区域部署元素 ​

Terms:grid-area

  • 通过 grid-area 属性可以将元素放在指定区域中。grid-area 由 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写模式。

17.1 编号定位 ​

  • 下例中将元素放在容器的中心位置中的栅格中
html
<style>
 article {
  margin: 0 auto;
  width: 400px;
  height: 400px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(4, 100px);
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  padding: 10px;
  border: solid 1px blueviolet;
  font-size: 30px;
  color: white;
 }

 article div:first-child {
  grid-area: 2/2/4/4;
 }
</style>

<article class="container">
 <div>1</div>
</article>

17.2 命名定位 ​

  • 同样是上面的例子可以使用栅格线命名来附加元素。
html
<style>
 article {
  margin: 0 auto;
  width: 400px;
  height: 400px;
  border: solid 5px silver;
  display: grid;
  grid-template-rows: repeat(auto-fill, [r] 100px);
  grid-template-columns: repeat(auto-fill, [l] 100px);
 }
 article div {
  background: blueviolet;
  background-clip: content-box;
  padding: 10px;
  border: solid 1px blueviolet;
  font-size: 30px;
  color: white;
 }
 article div:first-child {
  grid-area: r 2 / l 2 / r 4 / l 4;
 }
</style>

I.区域声明 ​

18.栅格区域布局真的太好用了 ​

Terms:grid-template-areas

html
<style>
 body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 100px 1fr 50px 60px;
  grid-template-areas:
   "header header header header"
   "nav main main aside"
   "footer footer footer footer";
 }

 main {
  /* 完整的写法，推荐使用下面的简写方式*/
  /* grid-area: main-start/main-start/main-end/main-end; */
  grid-area: main;
  background: #e9eeef;
 }

 header {
  background: #2ec56c;
  grid-area: header;
 }

 nav {
  background: #e1732c;
  grid-area: nav;
 }

 aside {
  grid-area: aside;
  background: #eebc31;
 }

 footer {
  grid-area: footer;
  background: #904fa9;
 }
</style>

<body>
 <header></header>
 <nav></nav>
 <main></main>
 <aside></aside>
 <footer></footer>
</body>

  • 简写形式
    • 语法格式:grid-template: '栅格名称 栅格名称 栅格名称 栅格名称' 行高 '栅格名称 栅格名称 栅格名称 栅格名称' 行高
    • '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;
html
<!-- 下面是使用 grid-template 进行简写的示例 -->

<style>
 body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template:
   "header header header header" 80px
   "nav main main aside" auto
   "footer footer footer footer" 50px/100px auto 50px 60px;
 }

 main {
  /* 完整的写法，推荐使用下面的简写方式*/
  /* grid-area: main-start/main-start/main-end/main-end; */
  grid-area: main;
  background: #e9eeef;
 }

 header {
  background: #2ec56c;
  grid-area: header;
 }

 nav {
  background: #e1732c;
  grid-area: nav;
 }

 aside {
  grid-area: aside;
  background: #eebc31;
 }

 footer {
  grid-area: footer;
  background: #904fa9;
 }
</style>

<body>
 <header></header>
 <nav></nav>
 <main></main>
 <aside></aside>
 <footer></footer>
</body>

19.使用栅格区域命名自定义部署元素 ​

  • 区域命名:系统会为区域自动命名，上例中的会产生 header-start 水平与垂直同名的起始区域与 header-end 水平与垂直同名的区域终止。
html
<style>
 article {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 80 1fr;
  grid-template-areas:
   "header header header"
   "nav main main"
   "footer footer footer";
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px blueviolet;
  padding: 10px;
  box-sizing: border-box;
  color: white;
  font-size: 25px;
 }

 div:nth-child(1) {
  grid-area: header-start/nav-start/main-end/main-end;
 }

 div:nth-child(2) {
  grid-area: footer-start/footer-start/footer-end/footer-end;
 }
</style>

<article>
 <div></div>
 <div></div>
</article>

20.使用区域占位符优化布局代码 ​

  • 区域占位
html
<!-- 使用一个或多个 连续的. 定义区域占位。 -->
<style>
 * {
  padding: 0;
  margin: 0;
 }

 article {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(3, 33.3%);
  grid-template-columns: repeat(3, 33.3%);
  grid-template-areas:
   "top . ."
   "top . ."
   "bottom bottom bottom";
 }

 .top {
  background: blueviolet;
  grid-area: top;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
 }

 .bottom {
  background: orange;
  grid-area: bottom;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
 }
</style>

<article>
 <div class="top">houdunren.com</div>
 <div class="bottom">hd</div>
</article>

J.栅格流动 ​

21.栅格流动处理机制 ​

Terms:grid-auto-flow

  • 在容器中设置 grid-auto-flow 属性可以改变单元格排列方式。
选项说明
column按列排序
row按行排列
dense元素使用前面空余栅格（下面有示例说明）
html
<style>
 article {
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  border: solid 5px silver;
  grid-auto-flow: column;
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  padding: 10px;
  font-size: 35px;
  color: white;
 }
</style>

<article>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</article>

  • 强制填充:当元素在栅格中放不下时，将会发生换行产生留白，使用grid-auto-flow: row dense;可以执行填充空白区域操作
html
<style>
 * {
  padding: 0;
  margin: 0;
 }

 body {
  padding-left: 200px;
  padding-top: 200px;
 }

 article {
  width: 600px;
  height: 600px;
  display: grid;
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 200px);
  border: solid 5px silver;
  grid-auto-flow: row dense;
 }

 div {
  background: blueviolet;
  background-clip: content-box;
  padding: 10px;
  font-size: 35px;
  color: white;
 }

 article div:nth-child(1) {
  grid-column: 1 / span 2;
  background: #000;
 }

 article div:nth-child(2) {
  grid-column: 2 / span 1;
 }
</style>

<article>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</article>

K.对齐管理 ​

22.栅格整齐对齐方式处理 ​

Terms:justify-content,align-content

  • 可以通过属性方便的定义栅格或元素的对齐方式
选项说明对象
justify-content所有栅格在容器中的水平对齐方式，容器有额外空间时栅格容器
align-content所有栅格在容器中的垂直对齐方式，容器有额外空间时栅格容器
align-items栅格内所有元素的垂直排列方式栅格容器
justify-items栅格内所有元素的横向排列方式栅格容器
align-self元素在栅格中垂直对齐方式栅格元素
justify-self元素在栅格中水平对齐方式栅格元素

  • 栅格对齐:justify-content 与 align-content 用于控制栅格的对齐方式，比如在栅格的尺寸小于容器的心里时，控制栅格的布局方式。

  • justify-content 属性的值如下

值说明
start容器左边
end容器右边
center容器中间
stretch撑满容器
space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly栅格间距离完全平均分配
  • align-content 属性的值如下
值说明
start容器顶边
end容器底边
center容器垂直中间
stretch撑满容器
space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly栅格间距离完全平均分配
html
<style>
 border: solid 5px silver;
 width: 600px;
 height: 600px;
 display: grid;
 grid-template-columns: 200px 200px;
 grid-template-rows: 200px 200px;
 justify-content: space-between;
 align-content: space-evenly;
</style>

html
<!-- 下面是栅格水平与垂直居中对齐的示例 -->

<style>
 main {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template: 10vh 20vh / 30vw auto;
  justify-content: center;
  align-content: center;
 }
 div {
  background: blueviolet;
  border: solid 1px #ddd;
  color: white;
  padding: 5px;
  box-sizing: border-box;
 }
 div:nth-child(1) {
  background-color: #3498db;
 }
 div:nth-child(2) {
  background-color: #f1c40f;
 }
 div:nth-child(3) {
  background-color: #2ecc71;
 }
 div:nth-child(4) {
  background-color: #9b59b6;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS</div>
 <div href="">hd</div>
</main>

23.栅格内元素的整体控制技巧 ​

Terms:align-items,justify-items

  • justify-items 与 align-items 用于控制所有栅格内元素的对齐方式

  • justify-items 用于控制元素的水平对齐方式，可用的属性值如下

    值说明
    start元素对齐栅格的左边
    end元素对齐栅格的右边
    center元素对齐栅格的中间
    stretch水平撑满栅格

  • align-items 用于控制元素的垂直对齐方式，可用的属性值如下

值说明
start元素对齐栅格的顶边
end元素对齐栅格的底边
center元素对齐栅格的垂直中间
stretch垂直撑满栅格
html
<!-- 下面是将元素在所在栅格中水平、垂直居中的示例 -->
<style>
 main {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template: 20vh / repeat(4, 1fr);
  justify-items: center;
  align-items: center;
 }
 div {
  background-clip: content-box;
  border: solid 1px #ddd;
  color: white;
  padding: 10px;
  box-sizing: border-box;
 }
 div:nth-child(1) {
  background-color: #3498db;
 }
 div:nth-child(2) {
  background-color: #f1c40f;
 }
 div:nth-child(3) {
  background-color: #2ecc71;
 }
 div:nth-child(4) {
  background-color: #9b59b6;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS</div>
 <div href="">hd</div>
</main>

html
<!-- 下面是所有元素在所在栅格中居中对齐的示例 -->

<style>
 main {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template: 50vh 1fr / 50vw 1fr;
  /* justify-content: center; */
  /* align-content: center; */
  justify-items: center;
  align-items: center;
 }
 div {
  background: blueviolet;
  border: solid 1px #ddd;
  color: white;
  padding: 5px;
  box-sizing: border-box;
 }
 div:nth-child(1) {
  background-color: #3498db;
 }
 div:nth-child(2) {
  background-color: #f1c40f;
 }
 div:nth-child(3) {
  background-color: #2ecc71;
 }
 div:nth-child(4) {
  background-color: #9b59b6;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS</div>
 <div href="">hd</div>
</main>

24.栅格元素独立控制对齐方式 ​

Terms:align-self,justify-self

  • justify-self 与 align-self 控制单个栅格内元素的对齐方式，属性值与 justify-items 和 align-items 是一致的。
html
<style>
 div:first-child {
  justify-self: end;
  align-self: center;
 }

 div:nth-child(4) {
  justify-self: start;
  align-self: center;
 }
</style>

25.组合简写栅格对齐方式 ​

Terms:place-content,place-items,place-self

25.1 place-content ​

  • 用于控制栅格的对齐方式，语法如下：place-content: <align-content> <justify-content>

25.2 place-items ​

  • 控制所有元素的对齐方式，语法结构如下：place-items: <align-items> <justify-items>

25.3 place-self ​

  • 控制单个元素的对齐方式:place-self: <align-self> <justify-self>

L.自动排列 ​

26.自动排列 ​

  • 当栅格无法放置内容时，系统会自动添加栅格用于放置溢出的元素，我们需要使用以下属性控制自动添加栅格的尺寸。

  • 属性说明

选项说明对象
grid-auto-rows控制自动增加的栅格行的尺寸，grid-auto-flow:row; 为默认容器
grid-auto-columns控制自动增加的栅格列的尺寸，grid-auto-flow: column;容器

26.1 自动栅格行 ​

  • 下面定义了 2X2 的栅格，但有多个元素，系统将自动创建栅格用于放置额外元素。我们使用 grid-auto-rows 来控制增加栅格的行高。
html
<style>
 main {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 50px;
  grid-auto-columns: 200px;
 }
 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px #ddd;
  color: white;
 }
</style>
<main>
 <div href="">我的音乐</div>
 <div href="">西方音乐</div>
 <div href="">北方音乐</div>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">训练营</div>
</main>

26.2 自动行列 ​

  • 下面创建了 2X2 栅格，我们将第 2 个 DIV 设置的格栅已经超过了四个栅格，所以系统会自动创建栅格。
html
<style>
 main {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-columns: 10vw;
  grid-auto-rows: 10vh;
 }
 div {
  background: blueviolet;
  background-clip: content-box;
  border: solid 1px #ddd;
  color: white;
 }
 div:nth-child(2) {
  grid-area: 5/5/5/5;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
</main>

M.终极简写 ​

27. 终结简写 ​

  • grid 是简写属性，可以用来设置：

    • 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，
    • 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，
    • 间距属性 grid-column-gap 和 grid-row-gap

  • 使用语法:

bash
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

27.1 行列划分 ​

  • 下面使用 grid 布局内容，将 body 容器的栅格居中排列，将 main 容器内的栅格内的元素居中排列。
html
<style>
 body {
  display: grid;
  place-content: center center;
  width: 100vw;
  height: 100vh;
 }
 main {
  display: grid;
  grid: 10vh / repeat(4, 1fr);
  place-items: center center;
 }
 div {
  background-clip: content-box;
  border: solid 1px #ddd;
  color: white;
  padding: 10px;
  box-sizing: border-box;
 }
 div:nth-child(1) {
  background-color: #3498db;
 }
 div:nth-child(2) {
  background-color: #f1c40f;
 }
 div:nth-child(3) {
  background-color: #2ecc71;
 }
 div:nth-child(4) {
  background-color: #9b59b6;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS</div>
 <div href="">hd</div>
</main>

27.2 定义区域 ​

  • 使用 grid 也可以定义栅格区域
html
<style>
 main {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid:
   "header header" 50px
   "nav main" auto
   "footer footer" 60px/100px auto;
 }
 div {
  border: solid 1px #ddd;
  color: white;
  padding: 10px;
  box-sizing: border-box;
 }
 div:nth-child(1) {
  background-color: #3498db;
  grid-area: header;
 }
 div:nth-child(2) {
  background-color: #f1c40f;
  grid-area: nav;
 }
 div:nth-child(3) {
  background-color: #2ecc71;
  grid-area: main;
 }
 div:nth-child(4) {
  background-color: #9b59b6;
  grid-area: footer;
 }
</style>
<main>
 <div href="">hd</div>
 <div href="">向军老师</div>
 <div href="">HDCMS</div>
 <div href="">hd</div>
</main>