grid属性-实例演示和总结

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父子元素

<!-- grid 实例演示 -->
<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>

• style 标签中添加grid基础样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* grid容器属性 */
.container {
    width: 25em;
    margin: 1em auto;
    /* 转换为grid网格容器 */
    display: grid;
    /* 设置2行3列布局 */
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
/* grid容器项目 */
.container .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: .2em;
    margin: .5em;
}

• 2.1 grid容器属性实例演示

  • 2.1.1 grid-template-rows | 轨道行高

    /* grid-template-rows | 轨道行高 */
    .container {
        /* 默认值 */
        grid-template-rows: auto;
        /* 第1行的行高5em，第二行的行高3em */
        grid-template-rows: 5em 3em;
    }

  

  • 2.1.2 grid-template-columns | 轨道列宽

    /* grid-template-columns | 轨道列宽 */
    .container {
        /* 第一列5em，第二列6em，第三列7em */
        grid-template-columns: 5em 6em 7em;
    }

  

  • 2.1.3 gap | 轨道间距

    /* gap | 轨道间距 */
    .container {
        /* 行间距0.5em，列间距1em */
        gap: .5em 1em;
    }

  

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

    • .container 内最后一个子元素后 span.item{item$@7}*3 额外添加 3 个元素，body标签中为

    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
    </div>

    • 原先的 2 行 3 列之外额外增加的 item7~item9 自动生成到网格中的项目为隐式轨道

    • style标签中继续添加样式

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

    

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

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

    

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

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

    

• 2.2 grid项目属性实例演示

  • grid-area | 网格定位

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

  

3. 写总结

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