span和不同数量网格线命名效果实例页面

展示

代码

• HTML：

  <h4>grid-column-start: B</h4>
  <div class="container">
      <div class="item"></div>
  </div>
  <h4>grid-column-start: span B</h4>
  <div class="container">
      <div class="item"></div>
  </div>

• CSS：

  .container {
      display:grid;
      background:#fff;
      grid-template-columns: [B] 80px [B] auto [B] 100px [D] auto auto;
      height: 100px;
      border: 1px dashed;
  }
  .item {
      grid-column-start: span B;
      grid-column-end: 4;
      background: deepskyblue;
  }
  .container:first-of-type .item {
      grid-column-start: B;
  }