Vue.js项目中如何将图表/图片放入网格或表格布局

直接使用原生CSS Grid实现即可，无需引入额外依赖，兼容所有现代浏览器，适配你需要的2:2、4:2布局比例非常方便。

完整修改后代码 #

<template>
  <div>
    <h3>Three charts that you can randomize</h3>
    <button @click="fillData()">Randomize</button>
    <div id="mainDiv"> 
      <div id="divOne" class="boxes"> 
        <bar-chart :chart-data="datacollection1" />
      </div> 
      <div id="divTwo" class="boxes">
        <pie-chart :chart-data="datacollection2"  />
      </div> 
      <div id="divThree" class="boxes">
       <line-chart :chart-data="datacollection3" />
      </div>          
    </div>
  </div>
</template> 
<script>
  // 原有图表逻辑保持不变
  THERE ARE SOME CHARTS SCRIPTS
</script>
<style>
/* 网格容器样式 */
#mainDiv {
  width: 100%;
  display: grid;
  /* 间距可按需调整 */
  gap: 18px;
  /* 4列布局对应4:2场景，2列布局对应2:2场景，也可以用响应式自动适配 */
  grid-template-columns: repeat(2, 1fr);
  /* 要响应式适配的话替换成下面这行，最小宽度300px，超过就自动加列 */
  /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
}

/* 图表盒子样式 */
.boxes {
  /* 2:2比例设为1/1，4:2比例设为2/1 */
  aspect-ratio: 1 / 1;
}

/* 确保图表组件占满父容器，若你的图表组件已有该样式可省略 */
.boxes > * {
  width: 100%;
  height: 100%;
}
</style>

可调参数说明 #

• 布局列数调整：修改grid-template-columns的repeat第一个参数，填2就是2列布局，填4就是4列布局；如果需要不同屏幕自动切换，加媒体查询即可，示例：

  /* 小于768px宽度用2列布局 */
  @media (max-width: 768px) {
    #mainDiv {
      grid-template-columns: repeat(2, 1fr);
    }
    .boxes {
      aspect-ratio: 1 / 1;
    }
  }
  /* 大于768px宽度用4列布局 */
  @media (min-width: 769px) {
    #mainDiv {
      grid-template-columns: repeat(4, 1fr);
    }
    .boxes {
      aspect-ratio: 2 / 1;
    }
  }
  

• 间距调整：修改gap的数值即可，不需要单独给子元素加边距，不会出现边缘多余空白的问题
• 比例调整：修改aspect-ratio的数值即可，1/1是正方形，2/1是宽高比2:1，按需调整即可

内容的提问来源于stack exchange，提问作者user16797230