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

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:

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
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
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 probar el código aquí, ver el sitio oficial de bulma aquí y ver otros de mis post acá.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *