I am coding in Vue.js and got some charts on my site. And I want to put them into some grid or table.It can be 2:2 or 4:2 and I don't know how.
So far I got this:
<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>
Can tell me how to put there some grid ? Thanks.
As I understand you right, you simply asking how to do a grid with 2 elemtents in each row. If yes, you can use it like this:
<style scoped>
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
grid-auto-rows: minmax(100px, auto);
}
</style>
And the html like this:
<div class="wrapper">
<div>Chart 1</div>
<div>Chart 2</div>
<div>Chart 3</div>
<div>Chart 4</div>
...
</div>