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

使用网格或柔性包装自由填充选项

Answer 1

使用网格将是这样

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

CSS网格自定义布局流程

1 个答案: