Se necesita una sólida comprensión de Flexbox y CSS Grid si desea crear sitios web impresionantes y receptivos.
Si ha estado escribiendo CSS durante algún tiempo, es muy probable que al menos haya oído hablar de estos términos. Incluso podría haber usado uno o ambos hasta cierto punto. Ambos son partes poderosas de CSS, con casos de uso similares pero sutilmente diferentes.
¿Qué es FlexBox?
Flexbox es un método de diseño CSS unidimensional que existe desde hace un tiempo. Puede pensar en Flexbox como un conjunto de propiedades CSS relacionadas que puede usar para alinear elementos HTML en un contenedor y administrar el espacio entre ellos.
Antes de Flexbox, este tipo de diseño requería un uso frustrante y difícil de manejar del flotador y propiedades de posición.
Si está preocupado por la compatibilidad del navegador con Flexbox, no lo esté. De acuerdo a caniuse.com, todos los navegadores modernos son compatibles con Flexbox.
Los fundamentos de Flexbox
Mientras Flexbox incluye muchas propiedades CSS
, los conceptos básicos son bastante simples. El uso de Flexbox siempre comienza declarando un contenedor principal como un contenedor flexible agregando pantalla: flexionar a sus reglas de estilo. Hacer esto automáticamente convierte a todos los elementos secundarios de este elemento en elementos flexibles.Después de eso, puede controlar la distribución del espacio dentro del contenedor flexible usando el propiedad de justificar contenido. Puede controlar la alineación de elementos flexibles con el alinear elementos propiedad.
Aquí hay un ejemplo de código que usa Flexbox para distribuir el espacio en un contenedor de manera uniforme entre sus elementos secundarios y alinearlos todos en el centro del contenedor. Este es el HTML:
<clase div="envase">
<división>1</div>
<división>2</div>
<división>3</div>
<división>4</div>
<división>5</div>
</div>Este es el CSS:
.envase {
pantalla: flexible;
ancho: 100%;
justificar contenido: espacio alrededor;
alinear elementos: centro;
borde: 1px negro sólido;
altura: 200px;
}
.envase > división {
altura: 100px;
ancho: 100px;
color de fondo: rojo;
color blanco;
tamaño de fuente: 5rem;
alineación de texto: centro;
borde-radio: 5px;
}
Y aquí está la salida:
¿Qué es la cuadrícula CSS?
CSS Grid es un sistema de diseño complementario a Flexbox. Flexbox es potente, pero no muy adecuado para ciertos tipos de diseños. Tratar de diseñar la estructura de una página completa con Flexbox terminará siendo una tarea frustrante que involucra un marcado feo, no semático y CSS pirateado.
CSS Grid no es un reemplazo de Flexbox, sino un sistema alternativo para algunas situaciones.
El soporte para CSS Grid no es tan extenso como lo es para Flexbox, pero Grid es razonablemente bien respaldado en 2022.
Los fundamentos de la cuadrícula CSS
El concepto de Grid es simple. Como sugiere el nombre, CSS Grid le permite dividir el espacio en un contenedor principal en una cuadrícula de filas y columnas, con la cantidad de filas/columnas que desee. Después de eso, especifica la posición de los elementos secundarios haciendo referencia a las líneas de la cuadrícula principal.
Comience agregando pantalla: rejilla al contenedor principal. Luego usa el cuadrícula-plantilla-filas y cuadrícula-plantilla-columnas properties para especificar las filas y columnas en las que desea dividir la cuadrícula. A continuación, puede utilizar el columna de cuadrícula y fila de cuadrícula properties en los elementos secundarios para indicarles en qué parte de la cuadrícula deben estar. Veamos un ejemplo de Grid que usa la configuración de cinco elementos de antes, pero en un arreglo más complicado.
Aquí está el HTML:
<clase div="envase">
<división>1</div>
<clase div="dos">2</div>
<clase div="tres">3</div>
<clase div="cuatro">4</div>
<clase div="cinco">5</div>
</div>Aquí está el CSS:
.envase {
pantalla: cuadrícula;
ancho: 100%;
grid-template-rows: repetir (3, 1fr);
grid-template-columns: repetir (3, 1fr);
brecha: 0.5rem;
borde: 1px negro sólido;
altura: 300px;
}.envase > división {
color de fondo: rojo;
color blanco;
tamaño de fuente: 5rem;
alineación de texto: centro;
borde-radio: 5px;
}
.envase > .dos {
fila de cuadrícula: 2;
cuadrícula-columna: 2;
}
Aquí está la salida:
CSS Grid también incluye una buena cantidad de otras propiedades que puede usar para crear diseños más complejos.
¿Cual deberías usar?
Primero, es importante tener en cuenta que nada le impide usar Flexbox y Grid juntos y, en algunos casos, esa es la opción óptima. Dicho esto, respondamos a la pregunta de qué diseños es más adecuado para implementar cada uno de estos sistemas.
Flexbox se adapta mejor a diseños de construcción que implican alinear y distribuir elementos en una sola línea. Ejemplos de este tipo de diseño son la alineación de iconos al final de una sección o la disposición de los enlaces en una barra de navegación.
Grid, por otro lado, brilla más cuando tiene que colocar elementos con precisión en relación con otros. (tanto horizontal como verticalmente), y necesita este posicionamiento para adaptarse fácilmente a varios tamaños de pantalla.
Para demostrarlo, este es el código que necesitaría escribir para recrear el diseño del ejemplo de Grid con Flexbox.
El HTML:
<clase div="envase">
<clase div="sub uno">
<división>1</div>
<división>5</div>
</div><clase div="sub dos">
<división>2</div>
</div>
<clase div="sub tres">
<división>4</div>
<división>3</div>
</div>
</div>
El CSS:
.envase {
borde: 1px negro sólido;
altura: 300px;
}.sub {
pantalla: flexible;
ancho: 100%;
}.uno, .tres {
justificar-contenido: espacio-entre
}.dos {
justificar-contenido: centro;
}
.sub > división {
altura: 100px;
ancho: 100px;
color de fondo: rojo;
color blanco;
tamaño de fuente: 5rem;
alineación de texto: centro;
borde-radio: 5px;
}
Y aquí está la salida:
Lo principal a tener en cuenta aquí es que si bien este código produce el mismo resultado que el ejemplo de Grid, el marcado aquí es significativamente más complicado. La implementación de este diseño requiere subcontenedores, y debe colocar los divs numerados fuera de orden en el marcado.
Además, suponga que necesita cambiar este diseño a una posición incómoda: digamos alinear la quinta división con la segunda. Si hubieras usado Flexbox para esto, tendrías que recurrir a posición: relativa o algo similar. Usando Grid, todo lo que necesita es cambiar el columna de cuadrícula propiedad.
Pero, por el contrario, implementar la alineación simple de una sola línea del ejemplo de Flexbox con Grid daría como resultado mucho más CSS. Grid obviamente es menos adecuado para ese tipo de diseño.
Si bien Flexbox y Grid pueden replicar en su mayoría los efectos de cada uno, existen algunas excepciones. Hacer que los elementos se superpongan es bastante difícil solo con Flexbox, pero es muy fácil con Grid. Grid tampoco permite que los elementos se separen de otros elementos con margin: auto como lo hace Flexbox.
Flexbox y Grid son poderosos sistemas de diseño
Flexbox y CSS Grid son sistemas de diseño que facilitan el diseño del contenido de su página web. Grid es mejor para diseños bidimensionales con muchos elementos que deben colocarse con precisión entre sí. Flexbox es mejor para diseños unidimensionales o de una sola línea donde solo necesita espaciar un montón de elementos de cierta manera.
