Responsive Grid system

La funcionalidad de nuestro carrito de compras ya se encuentra lista. Sin embargo, ¿Qué pasa si queremos visualizar nuestro proyecto desde el móvil, desde un celular, desde una tablet? Bueno, vamos a presionar F12 y veamos cómo cambia el contenido en el lado izquierdo. Si de pronto reduzco el espacio disponible para la página, vemos que los ""cart"s" empiezan a pegarse mucho y en algún punto ya es complicado leer. Entonces, ¿De qué manera podemos corregir esto? Vutify nos proporciona un sistema de grillas a través de columnas y lo hemos usado. Sin embargo, no hemos definido de qué manera debe adaptarse para dispositivos pequeños. Entonces vamos a hacer ello rápidamente. Vamos a trabajar sobre nuestro componente "HomeVue". Y luego, como tarea, vas a poder tú aplicar lo mismo sobre "cart" y "about". Según como lo creas correspondiente. Aquí, en “HomeVue” tenemos una etiqueta de "v-row" que contiene 2 etiquetas "v-col”. El primer bloque para el menú de la izquierda ocupa 2 columnas y el segundo bloque para nuestro listado de productos ocupa 10 columnas. Por eso, cuando nosotros reducimos el espacio, esas proporciones se mantienen siempre 2 y 10, 2 y 10. Y llega un punto en el que ya ninguno se puede leer. Nosotros podemos modificar este comportamiento. Vamos a entrar a la documentación de Vuetify y vamos a dirigirnos a la página de Grid System. Aquí tenemos un ejemplo donde se tiene un "v-row" y se define “cols=12”. Y a la vez se define “sm=4”. ¿Qué significa esto? Que a partir de un tamaño small cada bloque va a ocupar 4 columnas. Por eso es que aquí vemos 3. Pero cuando se trate de un tamaño menor a ese small se usarán 12 columnas. O sea que cada bloque ocupará todo el espacio disponible. Empecemos haciendo esa prueba. Vamos a poner aquí “sm=2”, “sm=10” y aquí vamos a poner 12 y 12. A partir de small en adelante ocupara 2 y este ocupará 10. Y para tamaños extra muy pequeños, ambos ocuparán 12 cada uno. Entonces vamos a hacer una prueba. Ahora mismo estamos ocupando 2 y 10. Sin embargo, llega un punto en el que logramos ver a ambas secciones ocupando 12 columnas cada uno. Esto que estamos viendo ahora es gracias a estos valores de 12 y 12 y hemos definido 2 y 10 para “sm”. ¿Qué es “sm”? “SM” es un tamaño de pantalla small representa a una tablet, nos dice. También tenemos extra small que en este caso sería esto de acá. Extra small ya hace referencia a celulares, así como tenemos SM, también podemos definir valores para MD, para LG, X L y XXL, que son monitores muy grandes o incluso teles. Con definir MD y LG deberíamos estar bien. Vamos por ejemplo a agregar aquí 2 y 10, aquí vamos a ponerle 3 y 9, para que el menú alcance a leerse. Vamos a actualizar, estamos con 12 y 12. Vamos a agrandar el tamaño y vamos a llegar a 3 y 9. Ahí está 3 y 9. Si seguimos agrandando un poco más, en algún punto vamos a llegar a 2 y 10. Allí está 2 y 10. Sin embargo, creo que 3 y 9 son valores adecuados incluso para MD y más bien para LG vamos a poner 2 y 10. Actualizamos, aquí está en 2 y 10, pero a medida que disminuimos el tamaño. Aquí pasó esto porque no tenemos definido SM. Esto de “cols” es un valor por defecto que se va a aplicar para aquellos tamaños de pantalla que no se han definido. Vamos a actualizar, aquí está, ahí está. Tenemos otra forma también de probar esto que es usando esta opción que dice “device toolbar”, le damos click “device goolbar” y nosotros podemos simular tamaños de dispositivos. Por ejemplo, en iPhone con la versión SE nos dice que se vería de esta manera en un pixel 5. De esta manera en una Samsung Galaxy y de esta manera tenemos un iPad y de esta manera podemos ir probando distintos tamaños de pantalla. No solamente podemos adaptar a este nivel, también podemos adaptar la cantidad de "carts" que mostramos. Por ejemplo, tal vez aquí está bien mostrar 3 "carts", pero hay algunos casos en los que tal vez no estemos aprovechando bien el tamaño de la pantalla. Por ejemplo, aquí le puse un zoom para alejar el contenido y esto es como se vería en una pantalla mucho más grande. Como vemos tenemos 3 "carts" pero podríamos mostrar incluso hasta 4, entonces es cuestión de ir probando distintos tamaños e ir adaptando según tus necesidades. Hagamos una muestra de cómo podemos adaptar los productos. Para los productos, nos dirigimos a el componente “ProductList”, ya que este contiene a los “productsCart” y este define el "v-col”. Vamos a cambiar esto de tal manera que ese “sm=4”, “cols=6”, “md=4” y “lg=3”. O sea, ocupar 6 significa mostrar 2 por cada fila. Ocupar 4 columnas de 12 significa mostrar 3 y en pantallas más grandes ocupar 3 de 12 significa mostrar 4 "carts" Incluso aquí podríamos adoptar esto de esta manera. Vamos a guardar y ver qué es lo que ocurre. Actualizamos, presionamos F12 y vamos a reducir el tamaño. Estamos viendo 3 carts, luego estamos viendo sólo 2. Vamos a continuar haciendo esto y vemos que llega un punto en el que solo mostramos un "cart" por fila. Todo esto funciona gracias al sistema de grillas que nos ofrece Vuetify, se disponen de 12 columnas. Para pantallas muy pequeñas ocupamos las 12 columnas, para pantallas small ocupamos 6, MD sólo 4, LG 3. A medida que la pantalla aumenta de tamaño, ocupamos menos columnas de las 12. Para poder mostrar más contenido. Y como vemos, en un tamaño de pantalla más grande, estamos mostrando incluso hasta 4 "carts" por fila. Ahora, ¿Qué ocurre en el caso de celulares muy, muy pequeños? Llega un punto en el que la opción de "about" se pierde y no se llega a mostrar. Está aquí debajo, pero no se llega a ver. Eso también podemos mejorarlo.

¡Suscríbete y continúa aprendiendo!

Responsive Grid system