search

博客列表 >（10.28） grid 布局的一些基本概念和属性演示

（10.28） grid 布局的一些基本概念和属性演示

存在
存在原创
2020年10月29日 19:03:03778浏览

一，grid 布局的基本术语解释

  • 网格容器

我们通过在元素上声明 display：grid 或 display：inline-grid(行内元素创建网格用到的属性) 来创建一个网格容器。

以下创建一个以 container 作为类名的 div 元素，它内部有 6 个子元素。

  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7.   <div class="item">item6</div>
  8. </div>

声明.container 为网格容器。

  1. .container {
  2.   display: grid;
  3. }

效果

网格容器

  • 网格项目

网格容器的所有直系子元素都是网格项目。

上例中所有的.item类的元素都是网格项目。

  • 网格单元

在 CSS 网格布局中，网格单元是 CSS 网格上可以具有的最小单元。它是四个相交的网格线之间的空间，在概念上非常像表格单元格。

图中高亮的就是网格单元。

网格单元

  • 网格区域

网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。

如图

网格区域

  • 网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。

如图

网格轨道

  • 轨道间隙

在两个网格单元之间的 网格横向间距 或 网格纵向间距。

轨道间隙属性

  1. .container {
  2.   /* 生成网格轨道中的“行” */
  3.   grid-template-rows: 1fr 1fr 1fr;
  4.   /* 生成网格轨道中的“列”*/
  5.   grid-template-columns: 1fr 1fr;
  7.   /* gap:水平间隙 垂直间隙 */
  8.   gap: 1em 2em;
  9. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7.   <div class="item">item6</div>
  8.   <div class="item">item7</div>
  9.   <div class="item">item8</div>
  10.   <div class="item">item9</div>
  11. </div>

效果
轨道间隙

二，grid 布局的一些属性演示

  • grid-template-rows

grid-template-rows: 生成网格轨道中的“行高”。

  1. 源码
  1. .container {
  2.   grid-template-rows: 1fr auto 3fr;
  3. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7. </div>
  1. 效果

演示

  • grid-template-columns

grid-template-columns: 生成网格轨道中的“列宽”。

  1. 源码
  1. .container {
  2.   grid-template-columns: 1fr 1fr;
  3. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7. </div>
  1. 效果

演示

  • gap

gap: 生成网格轨道中的间距。

  1. 源码
  1. .container {
  2.   grid-template-columns: 1fr 1fr;
  3.   /* gap：水平间隙 垂直间隙； */
  4.   gap: 2em 5em;
  5. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7. </div>
  1. 效果

演示

  • grid-auto-flow

项目排列的方向，默认为行优先。当设置为行优先时，列宽不能设置；当设置为列优先时，行高能不设置。

==行优先的情况（默认）==

  1. 源码
  1. .container {
  2.   grid-template-columns: 1fr 1fr;
  4.   grid-template-rows: 1fr 1fr 1fr 2fr;
  6.   /* 项目排列方向 */
  7.   /* 行优先： 默认值 */
  8.   grid-auto-flow: row;
  10.   /* 隐式网格单元的行高 */
  11.   grid-auto-rows: 1em;
  13.   /* 此时设置隐式网格单元的列宽无效 */
  14.   /* grid-auto-columns: 1em; */
  15. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7.   <div class="item">item6</div>
  8.   <div class="item">item7</div>
  9.   <div class="item">item8</div>
  10.   <div class="item">item9</div>
  11. </div>
  1. 效果

演示

==列优先的情况==

  1. 源码
  1. .container {
  2.   grid-template-columns: 1fr 1fr;
  4.   grid-template-rows: 1fr 1fr 1fr 2fr;
  6.   /* 项目排列方向 */
  7.   /* 行优先： 默认值 */
  8.   grid-auto-flow: column;
  10.   /* 隐式网格单元的列宽*/
  11.   grid-auto-columns: 1em;
  13.   /* 此时设置隐式网格单元的行高无效 */
  14.   /* grid-auto-rows: 1em; */
  15. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7.   <div class="item">item6</div>
  8.   <div class="item">item7</div>
  9.   <div class="item">item8</div>
  10.   <div class="item">item9</div>
  11. </div>
  1. 效果

演示

  • grid-auto-rows

属性 grid-auto-rows 用于指定隐式创建的行轨道大小

  1. 源码
  1. .container {
  2.   display: grid;
  4.   /* 创建一个3行两列的表格 */
  5.   grid-template-rows: 1fr 1fr 1fr;
  7.   grid-template-columns: 1fr 1fr;
  9.   /* 排列方向：按行排列 */
  11.   grid-auto-flow: row;
  13.   /* 设定隐式创建的单元格的行高 */
  15.   grid-auto-rows: 90px;
  16. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7.   <div class="item">item6</div>
  8.   <div class="item">item7</div>
  9.   <div class="item">item8</div>
  10.   <div class="item">item9</div>
  11. </div>
  1. 效果

演示

  • grid-auto-columns

属性 grid-auto-columns 指定了隐式创建的网格纵向轨道（track）的宽度，即隐式创建的列宽度。

  1. 源码
  1. .container {
  2.   display: grid;
  4.   /* 创建一个3行两列的表格 */
  5.   grid-template-rows: 1fr 1fr 1fr;
  7.   grid-template-columns: 1fr 1fr;
  9.   /* 排列方向：按列排列 */
  11.   grid-auto-flow: column;
  13.   /* 设定隐式创建的单元格的列宽 */
  15.   grid-auto-columns: 150px;
  16. }
  1. <div class="container">
  2.   <div class="item">item1</div>
  3.   <div class="item">item2</div>
  4.   <div class="item">item3</div>
  5.   <div class="item">item4</div>
  6.   <div class="item">item5</div>
  7.   <div class="item">item6</div>
  8.   <div class="item">item7</div>
  9.   <div class="item">item8</div>
  10.   <div class="item">item9</div>
  11. </div>
  1. 效果

演示

三，总结

grid 是一种相当优秀的布局方式，一定要认真去摸透每个属性代表的意义。属性虽然多点，需要我们平时多敲代码去加强记忆就一定能记住。

上一条：虚幻4系列笔记第一期《蓝图笔记》-开关门下一条：Grid布局基本概念和隐式排列
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
存在2020-10-30 19:29:091楼
好的老师！