grid-auto-flow:column与垂直排列优先布局实例页面

展示

代码

• HTML：

  <div class="container">
      <item><img src="./wallpaper-1.jpg"></item>
      <item><img src="./nature-1.jpg"></item>
      <item><img src="./nature-2.jpg"></item>
      <item><img src="./nature-3.jpg"></item>
      <item><img src="./nature-4.jpg"></item>
  </div>

• CSS：

  .container {
      display: grid;
      grid-auto-flow: column;
      grid-template: "a . ." 1fr 
                     "a . ." 1fr 
                     / 1fr 1fr 1fr;
      grid-gap: 6px;
  }
  .container item:first-child {
      grid-area: a;    
  }
  .container img {
      display: block;
      width: 100%; height: 100%;
  }