Grid system

Hemos cambiado un poco los colores, sin embargo la distribución de nuestras cards no es buena. Para hacer esta distribución podemos guiarnos de algunos ejemplos que nos proporciona Vuetify. Para esto nos vamos a la sección de Getting Started. Nos dirigimos a Wireframes. Aquí Vuetify nos da algunos ejemplos de cómo podemos distribuir nuestros elementos. Voy a abrir por ejemplo, este ejemplo, que se llama extended toolbar, y el resultado es este. Se cuenta con un menú en la parte superior, y en la parte inferior tenemos cards, que están distribuidos de manera uniforme, y tenemos más ejemplos. Por ejemplo constrained se ve de esta manera, ¿sí? Por ahora vamos a ignorar el layout general, o sea la distribución general, y vamos a enfocarnos simplemente en la parte del centro. Queremos replicar esto. Para esto le damos clic a este botón de GitHub, y vamos a ver el código de ejemplo que se está usando. Aquí hay un componente llamado main, y luego hay un componente llamado container. Dentro del componente llamado container hay un componente llamado row, y dentro de este v-row tenemos un v-column un componente llamado V guión column. ¿De qué manera funciona esto? Esto funciona de una manera muy similar que Bootstrap. Es decir se asume que existen 12 columnas en el sistema de grillas. Existen 12 columnas. Y luego nosotros podemos decir cuántas columnas queremos que ocupe cada elemento. Entonces en este caso se está usando este elemento v-col, y se está repitiendo 24 veces, porque hay 24 tarjetas. ¿Sí? Si contamos vamos a ver qué son 24 tarjetas. Y luego se está diciendo que se quiere ocupar 4 columnas. Dijimos que en total son 12 columnas imaginarias. Como hay 12, y decimos que queremos ocupar 4 cada vez, se está terminan creando tres espacios, ¿sí? En este caso no vamos a usar product card porque product card es solo una carta. Vamos a ir al elemento padre, product list. Este product list sí que contiene a los cards. En este caso lo que vamos a hacer es crear un v-row primero, porque un Vue row es el que contiene a los v-col, y luego vamos a poner este product card dentro de este etiqueta v-col, de esta manera. Si hacemos esto un solo v-col, va a contener a todos los product card. Nosotros queremos que los v-col se creen según la cantidad de productos. Por lo tanto vamos a poner el for aquí, a este nivel. Y vamos a indicar cuántas columnas nos interesa. Vamos a usar también el mismo valor de 4, ¿sí? Queremos que las columnas se usen de 4 en 4. Como son 2 en total, eso va a causar que tengamos tres cards, de esta manera. Llegados a este punto ya podemos eliminar el HR. Ya podemos eliminar este etiqueta HR que habíamos agregado anteriormente, ¿sí? Eliminamos la etiqueta HR que es la que causaba una línea horizontal y tenemos esto, tenemos tres cards ¿Qué pasa si quieres tener dos cards por fila? En ese caso dirás que quieres ocupar de seis en seis, y tendrás este resultado. Si quieres tener más elementos, quieres tener cuatro elementos, dirás que quieres ocupar las columnas de tres en tres, porque son 12 imaginarias. Aquí está, ¿sí? Aquí hay espacio para poner una tarjeta más. Entonces esto dependerá de cómo quieres distribuir tus elementos. Te recomiendo jugar con este VRow y con VCol para que te familiarices con estos componentes

¡Suscríbete y continúa aprendiendo!

Grid system