欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

grid属性-实例演示和总结

程序员文章站 2022-03-13 13:46:04
...

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. }

    grid属性-实例演示和总结

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

    grid属性-实例演示和总结

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

    grid属性-实例演示和总结

    • 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. }

      grid属性-实例演示和总结

    • 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. }

      grid属性-实例演示和总结

    • 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. }

      grid属性-实例演示和总结

  • 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. }

    grid属性-实例演示和总结

3. 写总结

  • display:grid 将元素转为块元素
  • grid容器与grid容器项目之间是父子关系
  • grid容器通过grid-template-rowsgrid-template-columns初始化一个显式容器
  • gap计算行列轨道间距,比较不容易溢出容器框
  • grid-auto-flow方便在行或列方向*添加新的项目,给与默认的行高和列宽
  • grid-auto-rows为隐式轨道排列为行方向(默认)为新添加的项目设置行高
  • grid-auto-columns为隐式轨道排列为列方向为新添加的项目设置列宽
  • grid-area方便为容器的项目移动定位