如何将图像/图表放入表格中？

Question

我正在使用 Vue.js 进行编码，并在我的网站上获得了一些图表。我想把它们放到一些网格或表格中。它可以是 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>
  .boxes{ 
    width:middle; 
    float: left;
  margin-left:18px; 
    } 
    #mainDiv{ 
        width:auto; 
   margin:middle; 
    } 
</style>

能告诉我如何放一些网格吗？谢谢。

Answer 1

据我了解，您只是询问如何在每个 row 中使用 2 个元素来执行 grid。如果是，你可以这样使用它：

<style scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
  grid-auto-rows: minmax(100px, auto);
}
</style>

而html 是这样的：

<div class="wrapper">
   <div>Chart 1</div>
   <div>Chart 2</div>
   <div>Chart 3</div>
   <div>Chart 4</div>
   ...
</div>