Estoy codificando en Vue.js y obtuve algunos gráficos en mi sitio. Y quiero ponerlos en alguna cuadrícula o tabla. Puede ser 2:2 o 4:2 y no sé cómo.
Hasta ahora tengo esto:
<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>¿Puede decirme cómo poner allí alguna cuadrícula? Gracias.
Como lo entiendo bien, simplemente pregunta cómo hacer una grid con 2 elementos en cada row . Si es así, puedes usarlo así:
<style scoped> .wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px; grid-auto-rows: minmax(100px, auto); } </style> Y el html así:
<div class="wrapper"> <div>Chart 1</div> <div>Chart 2</div> <div>Chart 3</div> <div>Chart 4</div> ... </div>