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

巴特西

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

最新文章

热门文章