gird 布局控制元素都显示在一行

gird 布局控制元素都显示在一行

<ul class="list">
  <li v-for="(li, index) in list" :key="index" class="li">
    {{ index }}
  </li>
</ul>

.list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      grid-auto-flow: column;
      grid-gap: 20px;
}

grid-auto-flow: column; 可以控制元素都在一行显示

grid-auto-flow 属性控制自动放置的项目如何插入网格中。
默认是 row

• 单个关键字：row、column，或 dense 中的一个。
• 两个关键字：row dense 或 column dense。

row 该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。

column 该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。

dense 该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。