多个元素，先列后行排列

多个元素，先列后行排列

问题描述及解决方案

由于各个元素长短不一，如果使用flex或者grid布局，按照先行后列排列，就会出现下面这种空白（椭圆处）。

问题描述

解决方案

使用column布局，采用先列后行排列，可以避免出现大量的空白行

demo

<template>
  <div class="test">
    <div class="list">
      <aside class="list_i" v-for="(item, idx) in children" :key="idx">{{ idx + 1 }} {{ item.title }}</aside>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      children: [
        { title: "Consultation" },
        { title: "Planning and Designing" },
        { title: "Clean Room & Special Ward Projects and Auxiliary Equipment" },
        { title: "Hospital Logistics Transmission System and Auxiliary Equipment" },
        { title: "Medical Gas Engineering and Auxiliary Equipment" },
        { title: "Hospital Water System and Supporting Equipment System Solutions" },
        { title: "Hospital HVAC Electrical and Weak Power System Construction Solutions" },
        { title: "Laboratory Projects and Equipment Exhibition Area" },
        { title: "Indoor Environment Decoration, Interior Design and Material Application Hospital Soft Furnishings and Furniture Equipment" },
        { title: "Innovative Technical Solutions for Hospital Windows, Doors, Curtain Walls and Accessories" },
        { title: "Green Hospital Building/Hospital Energy Saving Reconstruction and Operation Services" },
        { title: "Smart Hospital System Solutions" },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.test {
  padding: 40px;
  // column
  .list {
    border: 1px solid #f00;
    width: 600px;

    column-count: 2; /* 创建两列 */
    column-gap: 0; /* 设置列与列之间的间隙 */

    &_i {
      border: 1px solid #f00;
      padding: 10px;
      line-height: 2em;
      break-inside: avoid;
    }
  }
  //   grid
  //   .list {
  //     border: 1px solid #f00;
  //     width: 600px;
  //     display: grid;
  //     grid-template-columns: repeat(2, 1fr);

  //     &_i {
  //       border: 1px solid #f00;
  //       padding: 10px;
  //       line-height: 2em;
  //       break-inside: avoid;
  //     }
  //   }
}
</style>

如果你有更好的解决方案，欢迎指正，希望您不吝赐教