Guía básica para aprender a utilizar CSS Flexbox y CSS Grid

Esta guía te ayudará a entender los módulos de Flexbox y Grid de CSS para que puedas utilizarlo en tus proyectos y estilizar, de una manera más simple, el posicionamiento de elementos en pantalla. Son módulos completos y no una sola propiedad, implica un conjunto completo de propiedades.

🎪 Flexbox Layout

Tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (por eso se le llama “flex”).

La idea principal detrás del diseño flexible es darle al contenedor la capacidad de modificar el ancho/alto (y el orden) de sus elementos para llenar mejor el espacio disponible (adaptación a todo tipo de tamaños de pantalla). Un contenedor flexible puede expandir los elementos para llenar el espacio libre disponible o los puede reducir para evitar el desbordamiento.

Vas a ver ejemplos útiles donde utilizar Flexbox.

Centrar con Flexbox

En este caso utilizarás las siguientes propiedades CSS para centrar uno o varios "items" dentro de un elemento "container" de esta manera.

css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Cambiar dirección de elementos

Cambiarás la dirección del "container" con las siguientes propiedades.

css
.container {
    display: flex;
    flex-direction: column;
}

Por defecto posee un valor de flex-direction: row, lo cual indica en modo filas.

Manejar espacios sobrantes

En caso de que desees que los "items" dentro de un "container" se ajusten en tamaño cuando este se agrande o encoja, tienes las siguientes propiedades.

css
.item {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;

    /* Or shorthand */
    flex: 1 1 auto;
}

flex-grow para saber que tanto crece, flex-shrink para determinar que tanto se encoge y flex-basis que define el tamaño predeterminado de los "items" antes de que se distribuya el espacio restante.

Separación entre elementos

Normalmente se piensa en padding y margin para dar espaciados de elementos del HTML, pero su uso determina un espaciado específico en todos sus lados o alguno en concreto. Esta vez, usarás una mejor alternativa que te ayudará a solo dar distancia entre "items" dentro un "container".

css
.container {
    display: flex;
    gap: 25px;
  
    /* Specific Gap */
    row-gap: 25px;
    column-gap: 75px;
    
    /* Or shorthand */
    gap: 25px 75px; 
}

🎨 Grid Layout

Es un sistema de diseño bidimensional basado en "cuadrículas", quiere decir, se maneja con columnas y filas. El orden de origen de los elementos de la cuadrícula no importa, lo que hace que sea muy fácil reorganizarlo con media queries.

Es similar a Flexbox, pero su flujo unidireccional tiene diferentes casos de uso, ¡lo genial es que puedes combinarlos y funcionan bastante bien juntos!

Vas a ver ejemplos útiles donde utilizar Grid.

Centrar con Grid

Con Grid es muy sencillo, utilizarás las siguiente propiedades para centrar uno o varios "items" dentro de un elemento "container".

css
.container {
    display: grid;
    place-items: center;
}

Tratar con columnas

Grid te ofrece la posibilidad de modificar la cuadrícula en 2 dimensiones. En este caso si buscas que los columnas, osea el eje vertical, se ajusten a tu gusto, tienes las siguientes propiedades.

css
.container {
    display: grid;
    grid-template-columns: 100px 2fr 1fr;
}

Puedes usar medidas absolutas (no cambian) como "100px" o relativas (se ajustan automáticamente) como "1fr".

También puedes darle un valor como el siguiente si quieres que se reparta igualmente 3 veces 1 fracción, en este caso.

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Tratar con filas

Como has visto anteriormente nos faltaría manejar la dimension del eje horizontal, las filas. Para esto tienes las siguientes propiedades.

css
.container {
    display: grid;
    grid-template-rows: 1fr 2fr;
}

Como indica, puedes, igualmente, usar medidas absolutas (no cambian) como "350px" o relativas (se ajustan automáticamente) como "2fr".

Manejar celdas individualmente

No debes tan solo hacer una cuadrícula tan aburrida, vas a darle un poco de dinamismo. Puedes establecer valores en cada celda individual, incluso superponiendo celdas con otras, esto lo puedes lograr con las propiedades:

grid-column-start: el lugar de inicio entre las columnas que ocupara esta celda o item.

grid-column-end: el lugar final entre las columnas que ocupara esta celda o item.

grid-row-start: el lugar de inicio entre las filas que ocupara esta celda o item.

grid-row-end: el lugar final entre las filas que ocupara esta celda o item.

css
.container {
    display: grid;
}

.first {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  
    /* Shorthand */
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.last {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 4;
  
    /* Shorthand */
    grid-column: 1 / 4;
    grid-row: 4 / 4;
}

En este caso buscarás que las filas y columnas se repitan de forma distribuida, por eso usarás estas propiedades.

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

✨ Más información

Si quieres conocer más sobre CSS y cómo utilizarlo en el desarrollo de páginas y aplicaciones web, puedes aplicar al bootcamp de Desarrollo Web FullStack.