search

博客列表 >12 grid的基本操作

12 grid的基本操作

老黑
老黑原创
2020年07月01日 20:15:55671浏览

主要内容：

  1. grid的介绍
  2. grid基本属性
  3. item填充及简写
  4. 跨界区块操作

1、grid的介绍

① grid: 网格。基本术语包括

  • 容器: 使用网格布局的元素
  • 项目: 容器中的子元素
  • 网格线: 将容器划分为行与列的直线
  • 显式网络: 由用户根据项目数量指示容器生成的网格
  • 隐式网格: 由容器根据项目数量自动生成的网格
  • 单元格: 项目放置的具体空间
  • 网格区域: 一个以上的单元格组成的矩形区域

② 与flex的基本区别
flex : 容器 ===》 项目
grid: 容器 ===》 单元格 ===》 项目
想建立容器，然后建立单元格，最后再放入项目。

2、grid基本属性

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         height: 300px;
  6.         display: grid;
  8.         grid-template-columns: 100px 100px 100px;
  9.         grid-template-rows: 100px 100px 100px;
  10.         /*上面的就相当于建立三列三行，每列每行的间距为100px。
  11.         当然这个地方也可以用fr，eg 1fr，自动宽度*/
  12.       }
  13.       .container > .item {
  14.         border: 1px solid #000;background-color: lightgreen; 
  15.       }
  16.     </style>

  • 如果间隔等距离一样，也可以用repeat简化快速创建

    1.     .container {
    2.       width: 500px;
    3.       height: 300px;
    5.       display: grid;
    6.       grid-template-columns: repeat(5, 100px);
    7.       grid-template-rows: repeat(3, 100px);
  • 网格线的设置
    1.       column-gap: 5px;
    2.       row-gap: 5px; 
    3.       /* 如果都一样，也可以简化成 */
    4.       gap: 5px;

3、item的填充

item部分：

  1.     <div class="container">
  2.       <div class="item">header</div>
  3.       <div class="item">left</div>
  4.       <div class="item">main</div>
  5.       <div class="item">right</div>
  6.       <div class="item">footer</div>
  7.     </div>

css部分

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         height: 300px;
  6.         display: grid;
  7.         grid-template-columns: 40px 1fr 40px;
  8.         grid-template-rows: 30px 1fr 30px;
  9.       }
  10.       .container > .item:first-of-type {
  11.         background-color: lightgreen;
  13.         /* grid-column-start: 1;
  14.         grid-column-end: 2;
  15.         grid-row-start: 1;
  16.         grid-row-end: 2; */
  18.         /* grid-column-start: 3;
  19.         grid-column-end: 4;
  20.         grid-row-start: 2;
  21.         grid-row-end: 3; */
  23.     /* 默认总是跨越一行或一列，因此也可以简写 */
  24.         /* grid-column-start: 3;
  25.         grid-row-start: 2; */
  27.     /* 将项目放到多个网格区域中：跨网格 */
  28.         /* grid-column-start: 2;
  29.         grid-column-end: 4;
  30.         grid-row-start: 2;
  31.         grid-row-end: 4; */
  33.     /* 也可以这样写，行与列的跨越 */
  34.         /* grid-column-start: 2;
  35.         grid-column-end: span 2;
  36.         grid-row-start: 2;
  37.         grid-row-end: span 2; */
  39.     /* 简化 */
  40.         /* grid-column: 起始列号 / 结束列号;
  41.         grid-row: 起始行号 / 结束行号 */
  43.         /* grid-column: 2 / 4; */
  44.         /* grid-column: 2 / span 2; */
  45.         /* grid-row: 2 / 4; */
  46.         /* grid-row: 2 / span 2; */
  48.     /* 跨越整行 */
  49.         /* grid-column: 1 / 4;
  50.         grid-column: 1 / span 3; */
  52.     /* 使用负标 */
  53.         /* grid-column: 3 / 4; */
  54.         /* grid-column: -1 / -3; */
  56.     /* 充满整个容器 */
  57.         /* grid-column: 1 / span 3;
  58.         grid-row: 1 / span 3; */
  60.     /* 根据项目的当前默认位置进行简化。默认为1 1 */
  61.         /* grid-column: span 3;
  62.         grid-row: span 3; */
  64.     /* 想写得更加的直观 */
  65.         /* grid-column-start: 1; */
  66.         /* grid-column-end: span 3; */
  67.         /* grid-row-start: 1; */
  68.         /* grid-row-end: span 3; */
  70.     /* 示例：header */
  71.       /* .container > .item:first-of-type {
  72.         grid-column-end: span 3;
  73.       } */
  75.     /* 这块案例可以省略掉的，因为刚好已经落在了对应的位置 */
  76.       /* .container > .item:nth-of-type(2) {
  77.         grid-column: 1 / 2;
  78.       }
  79.       .container > .item:nth-of-type(3) {
  80.         grid-column: 2 / 3;
  81.       }
  82.       .container > .item:nth-of-type(4) {
  83.         grid-column: 3 / 4;
  84.       } */
  85.       .container > .item:first-of-type,
  86.       .container > .item:last-of-type {
  87.         grid-column-end: span 3;
  88.         background-color: lightgreen;
  89.       }
  90.     </style>

4、快速区块填充（grid-area）

  • css中进行区块命名
  • 用grid-template-areas结合命名进行直观快速填充

  1. div部分

    1.  <div class="container">
    2.    <div class="item">1</div>
    3.    <div class="item">2</div>
    4.  </div>

  2. css命名部分

    1.    .container {
    2.      width: 300px;
    3.      height: 300px;
    5.      display: grid;
    6.      grid-template-columns: repeat(3, 100px);
    7.      grid-template-rows: repeat(3, 100px);
    8.      /* column-gap: 5px;*/
    9.      /* row-gap: 5px; */
    10.      /* gap: 5px; */
    12.    .container > .item:first-of-type {
    13.      background-color: yellow;
    15.      /* grid-column-start: 2;
    16.      grid-column-end: 4;
    17.      grid-row-start: 2;
    18.      grid-row-end: 4; */
    20.  /* 使用网格区域属性: grid-area */
    21.  /* grid-area: 行起始 / 列起始  / 行结束 / 列结束 */
    22.      /* grid-area: 2 / 2 / 4 / 4; */
    24.      /* grid-area: span 2 / span 2; */
    25.  /* 索引网格区域 */
    26.      /* grid-area: 2 / 2 / span 2 / span 2; */
    27.  /* 命名网格区域 */
    28.      grid-area: ye;
    29.    }
    31.      .container > .item:last-of-type {
    32.      background-color: red;
    33.      grid-area: re;
    34.    }
  3. 直观填充
    1.    .container {
    2.      grid-template-areas:
    3.        "ye ye ye"
    4.        ". . ."
    5.        "re re re";
    6.    }
    7. /* 中间的部分为默认，不管*/

5、用grid快速做一个三列网页

最后的界面是这样的:

  1.     <div class="container">
  2.       <span class="itme item1"></span>
  3.       <a class="itme item2"></a>
  4.       <div class="itme item3"></div>
  5.       <div class="itme item4"></div>
  6.       <div class="itme item5"></div>
  7.     </div>

css部分

  1.     <style>
  2.       .container {
  3.         width: 400px;
  4.         height: 400px;
  5.         background-color: wheat;
  7.         display: grid;
  9.         /* 划分列 */
  10.         grid-template-columns: 80px 1fr 80px;
  11.         grid-template-rows: 40px 1fr 40px;
  13.         /* 设置区域名称。这块厉害了。 */
  14.         grid-template-areas:
  15.           "header header header"
  16.           "left main right"
  17.           "footer footer footer";
  18.       }
  19.       .item1 {
  20.         grid-area: header; /*命名，支持上面的*/
  21.         background-color: lightgreen;
  22.       }
  23.       .item2 {
  24.         grid-area: left;
  25.         background-color: yellow;
  26.       }
  27.       .item3 {
  28.         grid-area: main;
  29.         background-color: lightblue;
  30.       }
  31.       .item4 {
  32.         grid-area: right;
  33.         background-color: lightcyan;
  34.       }
  35.       .item5 {
  36.         grid-area: footer;
  37.         background-color: lightgreen;
  38.       }
  39.     </style>
上一条：13 pc网页一个模块的实战下一条：使用flex布局实现首页排版总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多