PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > grid属性-实例演示和总结

grid属性-实例演示和总结

葡萄枝子
葡萄枝子 原创
2020年12月25日 00:52:43 946浏览

grid属性-实例演示和总结

全部grid属性,进行实例演示,并记住讲过每一个属性值的意义,写出总结

1. 全部grid属性

  • 1.1 grid容器属性
属性 描述
grid-template-rows 轨道行高
grid-template-columns 轨道列宽
gap 轨道间距
grid-auto-flow 隐式轨道排列方式,默认行优先
grid-auto-rows 隐式轨道行高
grid-auto-columns 隐式轨道列宽
  • 1.2 grid项目属性
属性 描述
grid-area 网格定位

2. 实例演示

  • body 中添加grid父子元素
  1. <!-- grid 实例演示 -->
  2. <div class="container">
  3. <span class="item">item1</span>
  4. <span class="item">item2</span>
  5. <span class="item">item3</span>
  6. <span class="item">item4</span>
  7. <span class="item">item5</span>
  8. <span class="item">item6</span>
  9. </div>
  • style 标签中添加grid基础样式
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. /* grid容器属性 */
  7. .container {
  8. width: 25em;
  9. margin: 1em auto;
  10. /* 转换为grid网格容器 */
  11. display: grid;
  12. /* 设置2行3列布局 */
  13. grid-template-rows: 1fr 1fr;
  14. grid-template-columns: 1fr 1fr 1fr;
  15. }
  16. /* grid容器项目 */
  17. .container .item {
  18. background-color: lightcyan;
  19. border: 1px solid #000;
  20. padding: .2em;
  21. margin: .5em;
  22. }
  • 2.1 grid容器属性实例演示

    • 2.1.1 grid-template-rows | 轨道行高
    1. /* grid-template-rows | 轨道行高 */
    2. .container {
    3. /* 默认值 */
    4. grid-template-rows: auto;
    5. /* 第1行的行高5em,第二行的行高3em */
    6. grid-template-rows: 5em 3em;
    7. }

    轨道行高

    • 2.1.2 grid-template-columns | 轨道列宽
    1. /* grid-template-columns | 轨道列宽 */
    2. .container {
    3. /* 第一列5em,第二列6em,第三列7em */
    4. grid-template-columns: 5em 6em 7em;
    5. }

    轨道列宽

    • 2.1.3 gap | 轨道间距
    1. /* gap | 轨道间距 */
    2. .container {
    3. /* 行间距0.5em,列间距1em */
    4. gap: .5em 1em;
    5. }

    轨道间距

    • 2.1.4 grid-auto-flow | 隐式轨道排列方式

      • .container 内最后一个子元素后 span.item{item$@7}*3 额外添加 3 个元素,body标签中为
      1. <div class="container">
      2. <span class="item">item1</span>
      3. <span class="item">item2</span>
      4. <span class="item">item3</span>
      5. <span class="item">item4</span>
      6. <span class="item">item5</span>
      7. <span class="item">item6</span>
      8. <span class="item">item7</span>
      9. <span class="item">item8</span>
      10. <span class="item">item9</span>
      11. </div>
      • 原先的 2 行 3 列之外额外增加的 item7~item9 自动生成到网格中的项目为隐式轨道

      • style标签中继续添加样式

      1. /* grid-auto-flow | 隐式轨道排列方式 */
      2. .container .item:nth-of-type(6)~* {
      3. /* 最后添加的三个项目更改背景色 */
      4. background-color: lightseagreen;
      5. }
      6. .container {
      7. /* 先行后列,默认行优先 */
      8. grid-auto-flow: row;
      9. /* 列优先排列 */
      10. grid-auto-flow: column;
      11. }

      隐式轨道排列方式

    • 2.1.5 grid-auto-rows | 隐式轨道行高

      1. /* grid-auto-rows | 隐式轨道行高 */
      2. .container {
      3. /* 改回行优先 */
      4. grid-auto-flow: row;
      5. /* 设置隐式轨道,最后添加的7、8、9,行高自动默认值 */
      6. grid-auto-rows: auto;
      7. grid-auto-rows: 1fr;
      8. /* 设置隐式轨道,最后添加的7、8、9行高4em */
      9. grid-auto-rows: 4em;
      10. }

      隐式轨道行高

    • 2.1.6 grid-auto-columns | 隐式轨道列宽

      1. /* grid-auto-columns | 隐式轨道列宽 */
      2. .container {
      3. /* 改为列优先 */
      4. grid-auto-flow: column;
      5. /* 设置隐式轨道,最后添加的7、8、9,列宽自动默认值 */
      6. grid-auto-columns: auto;
      7. grid-auto-columns: 1fr;
      8. /* 设置隐式轨道,最后添加的7、8、9列宽5em */
      9. grid-auto-columns: 5em;
      10. }

      隐式轨道列宽

  • 2.2 grid项目属性实例演示

    • grid-area | 网格定位
    1. /* grid-area | 网格定位 */
    2. .container .item:nth-of-type(7) {
    3. /* 将项目7移到第1行第2列位置,再跨两行 */
    4. grid-area: 1/2/span 2;
    5. }

    网格定位

3. 写总结

  • display:grid 将元素转为块元素
  • grid容器与grid容器项目之间是父子关系
  • grid容器通过grid-template-rowsgrid-template-columns初始化一个显式容器
  • gap计算行列轨道间距,比较不容易溢出容器框
  • grid-auto-flow方便在行或列方向自由添加新的项目,给与默认的行高和列宽
  • grid-auto-rows为隐式轨道排列为行方向(默认)为新添加的项目设置行高
  • grid-auto-columns为隐式轨道排列为列方向为新添加的项目设置列宽
  • grid-area方便为容器的项目移动定位
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议