Bulma CSS

Bulma – Cuadrícula dinámica y automática

Hoy te mostraré cómo hacer una cuadrícula o grid en donde cada sección se acople a la pantalla de manera automática y dinámica sin que tú sepas la cantidad de columnas que habrá.

Esto es útil para cuando tenemos contenido dinámico (ya sea generado por el lado del cliente o del servidor) y queremos que las tarjetas o cuadros sobrantes se bajen automáticamente a otra fila.

Básicamente haremos una cuadrícula que ajuste el contenido dinámico usando bulma y sus columnas. Verás que es muy sencillo.

Descripción

Lo que haremos será acomodar las columnas y bajarlas si ya no caben en la pantalla. Por ejemplo, si cada columna ocupa un cuarto del ancho y colocamos 5 de ellas, la quinta se bajará a una nueva fila.

Todo esto sin saber la cantidad de cuadros que tendremos.

Filas automáticas con Vue

Veamos cómo tener filas automáticas. La clave está en agregar la clase is-multiline al div que es el contenedor de columnas. La manera incorrecta es la siguiente:

<div class="columns">
 <div class="column is-one-quarter">Yo ocupo un cuarto de la pantalla</div>
 <div class="column is-one-quarter">Yo ocupo un cuarto de la pantalla</div>
 <div class="column is-one-quarter">Yo ocupo un cuarto de la pantalla</div>
 <div class="column is-one-quarter">Yo ocupo un cuarto de la pantalla</div>
 <div class="column is-one-quarter">Yo ocupo un cuarto de la pantalla y debería de ir en una nueva fila sin tener que declararla</div>
</div>

Ya que al verlo en el navegador, no aparece la quinta columna:

Cuadrícula con filas automáticas en CSS – Div no se va a la fila

Para solucionar eso podríamos cerrar el div de la fila y abrir otro, pero como queremos que esto sea dinámico simplemente agregamos la clase is-multiline y ahora se ve así:

Grid con filas y columas dinámicas usando Bulma y CSS

De este modo podrías agregar infinitas columnas y todas se ajustarían de manera automática creando nuevas filas. Obviamente podrías cambiar el tamaño a un tercio, un quinto, la mitad, etcétera.

Yo usé esto en un sitio de recetas que publicaré muy pronto, me sirvió para colocar todas las recetas como tarjetas automáticas y dinámicas.

Si quieres puedes ver el sitio oficial de bulma aquí y ver otros de mis post acá.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.