grid布局area

Question

grid布局area 不能作为排序用吗？如果就想让这几个元素按指定循序排列 有没有什么好办法（这是个demo 135（一组） 和24（一组） 这些元素是遍历出来的，所以想按指定顺序排）

Answer 1

如果你想要在CSS Grid布局中按照特定的顺序（例如1-3-2-4-5）排列盒子，你需要使用order属性而不是grid-area。grid-area是用来指定元素所在的具体网格区域，而order属性才是用来控制元素的排列顺序。

以下是如何使用order属性来实现你想要的排列顺序：

<template>
  <div class="down">
    <div v-for="i in 5" :key="i" :class="'box' + i">{{ i }}</div>
  </div>
</template>

<style scoped lang="scss">
.down {
  height: 64%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: space-around;
  grid-gap: 10px; /* 假设你想要格子之间有些间隔 */
}

.box1 {
  order: 1;
}

.box3 {
  order: 2;
}

.box2 {
  order: 3;
}

.box4 {
  order: 4;
}

.box5 {
  order: 5;
}
</style>