Hace cuatro años publiqué “No pienses demasiado en las cuadrículas” y resonó en bastantes personas. Incluso en ese entonces, pensé que podríamos haber estado en Peak Grid. Alguien estaba promocionando un nuevo marco de red prácticamente todas las semanas.
Ese artículo fue mi manera de decir: “¡No temas! ¡Puedes hacer una cuadrícula tú mismo! No necesitas un marco complicado “. Puede que no haya sido tan elegante, pero así es como lo hice. Flota un par de elementos con algunos anchos porcentuales y lo llama un día.
En estos días, si está listo para saltar a flexbox para el diseño, las cuadrículas de bricolaje son aún más fáciles.
Así es como lo hago normalmente:
<div class="flex-grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>.flex-grid {
display: flex;
}
.col {
flex: 1;
}¡Eso admite cualquier número de columnas y automáticamente tienen el mismo ancho y son flexibles!
¿Quieres que se dividan en una columna para pantallas pequeñas? Fácil:
@media (max-width: 400px) {
.flex-grid {
display: block;
}
}¿Necesitas canaletas? Puede agregar márgenes a las columnas. Puede agregar relleno a las columnas. Me gusta la idea de usar la justificación para crear las columnas, como:
.flex-grid-thirds {
display: flex;
justify-content: space-between;
}
.flex-grid-thirds .col {
width: 32%;
}Si sigue la ruta de flexbox, ahora también tiene la capacidad de cambiar el orden de las columnas según sea necesario, lo que puede ser excelente para mantener el contenido más importante en un lugar más alto en la fuente, así como para la reorganización del diseño receptivo.
Vea Pen Easy Flexbox Grid de Chris Coyier (@chriscoyier) en CodePen.
Mi punto, de nuevo: no es necesario que busque un marco de cuadrícula para construir una cuadrícula. ¡Puedes hacerlo! Esto tampoco quiere decir que flexbox sea trivialmente fácil y nunca tendrás ningún problema. Hay muchos casos extremos y cosas raras de compatibilidad con navegadores con las que puede encontrarse si comienza a usar más funciones de flexbox de nicho. Sin embargo, lo que vimos aquí es bastante básico y me sorprendería que tuvieras problemas.
Más
Philip Walton ha escrito más sobre la gloria de los sistemas de rejilla Flexbox.
Para ser justos, los marcos de cuadrícula tienden a ser bastante robustos, y muchos equipos encuentran éxito al tener clases y recetas predefinidas para construir cualquier tipo de cuadrícula que necesiten. Si está interesado en apoyarse en un marco de cuadrícula que sea específico de flexbox, aquí hay algunos que conozco: Frow, Flexbox Grid y Gridlex.