Hay tantos recursos de CSS excelentes en internet. Pero ¿qué pasa si solo quieres un diseño simple y lo quieres ahora? En este artículo, describo los 5 layouts más comunes y cómo construirlos usando Flexbox y Grid.
¿Cómo funcionará esto?
Hay un link debajo de cada uno de los layouts para ver el código HTML y CSS en CodePen. Puedes darte cuenta que uso SASS para la definición de estilos, si quieres hacerlo en tu local, debes instalar SASS usando:
npm i sass -g
Plantilla de una tarjeta básica
Utilicé la tarjeta anterior como base del diseño del layout. Está compuesto por tres elementos en dirección vertical, por lo que los bloques div funcionan bastante bien. Sin embargo, necesitaré hacer que el elemento central (el párrafo) se estire.
Ganador: Flexbos
Empecemos creando nuestros diferentes layouts.
#1 Tarjeta verticalmente y horizontalmente centrados
Con Flexbox, necesitamos un elemento centrado horizontalmente, y otro (el elemento hijo) que sea centrado verticalmente. El orden de los elementos es definido por flex-direction. La forma en que el elemento se posiciona en el espacio disponible se establece mediante align-self en el elemento o align-items en el elemento padre.
Con Grid, necesitamos tres columnas y tres filas. Con esto podemos posicionar la tarjeta en la celda del medio. Centrar horizontalmente es sencillo. Definimos tres columnas y su tamaño usando grid-template-columns: auto 33% auto ya que la tarjeta debe ser tan ancha como 1/3 del área visible.
El problema es que nosotros no sabemos la dimensiones verticales, queremos que las filas superior e inferior ocupen el espacio restante que no es posible con la cuadrícula. La tarjeta está centrada, pero su altura depende de la altura de la ventana. Sin embargo, podemos solucionar esto con un elemento adicional alrededor de la tarjeta y centrarlo usando margin.
Ganador: Flexbos
#2 Dos tarjetas vertical y horizontalmente centradas
A menudo necesitamos centrar más de un elemento. Estas dos tarjetas también deben mantener la misma altura si una u otra contiene un texto más largo.
Con Flexblox, necesitamos agrupar ambas tarjetas en otro elemento y usarlo para centrar ambas a la vez. No podemos usar align-items aquí ya que se aplica al eje Y en este caso. Necesitamos definir como el espacio restante en el eje X debe ser distribuido usando justify-content: center. Esto asegura que ambas tarjetas estén centrados horizontalmente.
Si omitimos el problema de la altura variable de Grid, podemos alcanzar el mismo resultado incluso sin ningún elemento agrupador adicional. En esta ocasión definimos un cuadrícula con cinco columnas con rid-template-columns: auto 33% 50px 33% auto. El resto permanece como el ejemplo anterior.
Ganador: Flexbos
#3 Multiples tarjetas con el mismo tamaño
Este es otro caso de uso típico para blogs, sitios de comercio electrónico (e-commerce), o en general, cualquier sitio que muestre algún tipo de listado. Queremos que las tarjetas tengan el mismo ancho y alto. La altura se debe inferir del elemento más grande en la lista.
Esto se puede hacer en Flebox usando flex-wrap:wrap. Los elementos pasan a la siguiente línea si su ancho excede el espacio restante de cada línea. Sin embargo, la misma altura sólo se conserva en el ámbito de una sola línea, a menos que se defina explícitamente.
Grid muestra su verdadero poder aquí. Este diseño se puede crear usando grid-auto-rows: 1fr que aplica la misma altura a todas las líneas.
Ganador: Grid
#3 Alternando entre textos e imagenes centrados horizontalmente y verticalmente
En este ejemplo, tenemos texto con botones CTA acompañados con imágenes del otro lado. Ambos componentes deben ser centrados verticalmente, ya que su tamaño puede variar.
Esto es pan comido para Flexbox. Cada fila es un elemento de un artículo dividido en dos contenedores, .imgy .content. Son necesarios para una distribución uniforme (flex-basis: 50%). El centrado vertical del contenido interno es definido usando align-items: center. La alternancia se logra invirtiendo la dirección de Flexbox usando flex-direction: row-reverse en cada artículo impar.
Grid maneja este caso bastante bien también. No necesitamos definir un gran grid, sino más bien uno por cada artículo. Define columnas igualmente anchas que están verticalmente centradas usando align-items: center y la alternancia se define a nivel de celda mediante valores conmutados grid-column.
Ganador: Empate
#5 Cabecera horizontal con menú
Para lograr este diseño usando Flexbox, ambos lados de la cabecera necesitan ser representados como un solo elemento.
El logo y el nombre de la compañía como un solo elemento anchor a la izquierda, y el menú es un elemento nav a la derecha. Flexbox los posiciona con justify-content: space-between.
Con Grid, necesitamos dos columnas - una para el logo y otra para el menú. El menú es otro grid que distribuye el tamaño de las columnas usando grid-template-columns: repeat(4, minmax(0, 1fr)). El problema aquí es que si queremos añadir otro elemento al menú, también necesitamos modificar el CSS.
Ganador: Flexbox
Y el ganador es ....
El puntaje final es 5:2 a favor de Flexbox, pero esto no significa que esto lo convierta en el mejor. Hay situaciones donde se necesita usar uno u otro, algunas ocasiones usarlos juntos para alcanzar lo que se necesita.
Si necesitas flexibilidad y posiciones condicionadas trabajar con Flexbox. Si quieres crear listas o estructuras similares que requieran elementos de tamaños iguales o tener una forma de tabla trabajar con Grid.
Como programador front-end, no te saldrás con la tuya sin saber ambos.
Traducido del artículo de Ondrej Polesny - Flexbox vs Grid - How to Build the Most Common HTML Layouts