Para las personas con muchos años en el desarrollo web, la propiedad “float”, o “posicionamiento flotante”, era una opción predeterminada al momento de crear un layout para CSS. Sin embargo, hoy en día los desarrolladores web tienen más opciones y menos conflictos con nuevas técnicas como Flexbox o la rejilla CSS Grid ( CSS Grid ).
Crear plantillas de CSS con Flexbox y Grid es súpersencillo. Sin embargo, la curva de aprendizaje podría ser el primer obstáculo para muchos desarrolladores web. Por lo tanto, muchos de ellos aún confían en la poco confiable float, en los inflexibles elementos posicionados o en el complejo Bootstrap.
Una breve historia del diseño Web
Los sitios web han cambiado mucho en las últimas décadas. Comenzaron como páginas estáticas sin ningún formato. Ahora, uno puede encontrar una página web completamente interactiva con muchos usuarios creando contenido al mismo tiempo.
Los sitios web han avanzado porque el desarrollo web lo ha hecho. En los primeros años, los desarrolladores web descubrieron cómo crear diseños utilizando tablas; una práctica castigada hoy en día por los motores de búsqueda y los defensores de la web semántica.
Las propiedades de flotación y posición se convirtieron en una mejor solución para los diseños con CSS por un tiempo. La propiedad flotante comenzó como una forma valiosa de dar a las páginas web un aspecto de revista. Con ella, los desarrolladores pueden organizar una imagen y dejar que el texto fluya a su alrededor, o pueden crear cuadros con información en un cuadro aparte del artículo principal.
Después de un tiempo, los desarrolladores web se dieron cuenta de que también podían usar la propiedad flotante para crear diseños más dinámicos y receptivos. Sin embargo, desarrollar diseños CSS no era el primer objetivo de la propiedad flotante o float. Por lo tanto, a veces puede resultar un verdadero dolor de cabeza cuando se trata de diseñar un sitio responsivo, o en ocasiones no es la solución más elegante cuando necesita especificar que se borre cada elemento después de un float.
En los últimos años, han llegado dos nuevos módulos CSS para revolucionar la forma en que creamos diseños CSS: Flexbox y CSS Grid. Estas técnicas CSS permiten a los desarrolladores web crear diseños de diseño más complejos y receptivos que funcionan en muchos navegadores.
Conoce la cuadrícula
Desde octubre de 2017, todos los principales navegadores -Chrome, Firefox, Safari y Edge- ofrecen soporte en CSS Grid Layout sin prefijos de proveedores. Ahora, los desarrolladores web tienen una poderosa herramienta de dos dimensiones para desarrollar diseños CSS en menos tiempo y con menos problemas o sorpresas desagradables.
Para algunas personas, Grid ofrece “el sistema de diseño más potente disponible en CSS“. Al igual que un sistema bidimensional, los desarrolladores pueden configurar columnas y filas.
¿Qué tan fácil es usar un diseño de cuadrícula en CSS? Es increíblemente fácil. El primer paso es crear un elemento contenedor de la rejilla. Podría ser un elemento “principal” o “aparte”, o un div con una clase particular. Por ejemplo:
.my-first-grid {
display: grid;Luego, especifique cuántas columnas y filas tendrá la cuadrícula:
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 20px);Las últimas líneas significan cuatro columnas de la misma proporción y cuatro filas de 20 píxeles cada una. Entonces, su código se verá así.
.my-first-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 20px);
}Luego, coloque los elementos secundarios de la columna de cuadrícula y la fila de cuadrícula:
.my-first-child-element {
grid-column: 1/2;
grid-row: 2/3;
}Eso significa “colocar estas clases en la primera columna y la segunda fila”.
Puede encontrar documentación más detallada sobre Grid en Una guía completa de Grid o jugar a este juego mientras domina los conceptos básicos.
Piensa dentro del Flexbox
El diseño de caja flexible o Flexbox es un módulo que tiene como objetivo distribuir espacio o alinear elementos dentro de un contenedor de la manera más fácil posible. Actualmente, es una Recomendación del W3C con su última actualización en noviembre de 2018.
Una diferencia crucial entre Flexbox y Grid es que Flexbox es un sistema unidimensional. No es posible crear columnas y filas en flexbox, pero esa es una parte central de su flexibilidad. Los desarrolladores web pueden ordenar artículos y administrar el espacio entre ellos, incluso sin saber el tamaño del contenedor.
Esta característica es conveniente hoy en día cuando los desarrolladores web necesitan diseñar sitios web que los usuarios recuperarán en una amplia variedad de dispositivos, como teléfonos inteligentes, computadoras portátiles o tabletas.
La flexibilidad es un activo, y Flexbox lo ofrece.
Para mostrar Flexbox, selecciona Flexbox en la propiedad de visualización de un contenedor:
my-first-flexbox-container {
display: flexbox;
}Bastante fácil, ¿no es así? Sí, pero los principiantes deberán aprender algunas cosas básicas sobre flexbox para aprovechar al máximo esta herramienta.
Primero, el eje predeterminado está basado en horizontal y va de izquierda a derecha. Si hay cuatro elementos dentro de un contenedor, ordenarán de esta manera por defecto:
Para cambiar el orden de los elementos, agregue la propiedad flex-direction. Para cambiar la posición inicial de los elementos, agregue la propiedad justify-content. Por ejemplo, para ordenar artículos como una columna en el centro, el código sería:
my-first-flexbox-container {
display: flex;
flex-direction: column;
justify-content: center;
}Domina los conceptos básicos de Flexbox con una guía completa de Flexbox y diviértete jugando a este juego.
¿Cuál es mejor: Flexbox o Grid?
Tanto Grid como Flexbox se pueden usar para crear diseños receptivos y diseños complejos, pero son técnicas diferentes y, como cada proyecto web, uno es mejor que el otro dependiendo de lo que se quiera lograr.
Flexbox es una solución simple, confiable y rápida para diseños pequeños y los elementos de una aplicación. Mientras tanto, Grid es una técnica más confiable para diseños a gran escala.