css 网格自定义布局流程

Question

我需要列出要格式化的内容，我有一些东西

<div class="container">
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
</div>

像这样。元素数量是动态的，我总是希望前 6 个元素处于行模式，所有其他元素都在列中。例如

- - - - - -
    - -    
    - -    
    - -    
    - -  

元素顺序应该是:

1 2 3 4 5 6
    7 8
    9 10
    11 12

自由填充选项，使用网格或 flex 环绕

Answer 1

使用grid会是这样

.container {
  display: grid;
  /* Create six columns and four rows */
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 50px);
}

/* Select every second, starting at sixth */
.item:nth-child(2n+7) {
  /* Specify the column to put the item */
  grid-column: 3;
}

<div class="container">
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
  <span class="item">Item</span>
</div>