¿Grid o Flexbox? ¿Qué resulta más útil en diseño y maquetación web?

Flexbox y  Grid son dos  mecanismos de CSS que resultan especialmente útiles de cara a la  maquetación de páginas web. Comparamos sus principales funcionalidades y, en un primer vistazo, tenemos que reconocer que Grid puede hacer cosas que Flexbox no puede hacer y Flexbox puede hacer cosas que Grid no puede hacer. Con la ventaja de que ambos pueden trabajar juntos: un elemento de Grid puede ser un contenedor Flexbox y un elemento de Flexbox puede ser un contenedor de Grid.

Entonces, ¿Grid puede reemplazar a Flexbox? En principio parece un poco complicado, especialmente si estás empezando a controlar la extraña forma de Grid (que, al ser más nuevo, tiene menos soporte que Flexbox) y la rara sintaxis de Flexbox, por lo que no hay razón para utilizar sólo Grid CSS o sólo Flexbox. La mejor recomendación en aprender ambos y usarlos juntos.

En qué destaca Grid respecto a Flexbox

  • Para diseños 2D (filas y  columnas).
  • CSS Grid es perfecto para construir una imagen más grande. Hace que sea realmente fácil de manejar el diseño de la página e incluso puede manejar diseños poco ortodoxos y asimétricos.
  • Requiere menos intervención de consulta, lo que hace que sea realmente potente en funcionalidades del estilo auto layout: minmax(), repeat(), y auto-fill.

En qué destaca Flexbox respecto a Grid

  • Flexbox es la mejor opción para alinear el contenido dentro de los elementos.
  • Utiliza Flexbox para posicionar los detalles más pequeños de un diseño.
  • Flexbox funciona mejor sólo en una dimensión (filas o columnas).

Ejemplos prácticos

A continuación, os dejamos con un par de ejemplos prácticos para resolver, tanto en Flexbox como en Grid, situaciones que se nos pueden dar a la hora de realizar un proyecto.

Posición de las secciones de la página

  • En Flexbox. Situamos todas las secciones, una debajo de otra:
    .container {
         display: flex;
         flex-direction: column;
     }

    Ahora tenemos que hacer que la sección principal y la barra lateral estén uno al lado del otro.

    <header></header>
     <div class="main-and-sidebar-wrapper">
         <section class="main"></section>
         <aside class="sidebar"></aside>
     </div>
     <footer></footer>

    Mostramos display:flex y flex-direction en dirección opuesta.

    .main-and-sidebar-wrapper {
         display: flex;
         flex-direction: row;
     }

    El último paso es establecer el tamaño de la sección principal y la barra lateral. Queremos que el contenido principal sea tres veces el tamaño de la barra lateral, lo que no es difícil de hacer con Flex o porcentajes.

    .main {
         flex: 3;
         margin-right: 60px;
     }
     .sidebar {
        flex: 1;
     }
  • En CSS Grid. Primero, vamos a definir cuatro grid-area, una para cada sección de página:
    <header></header>
     <!-- Observa que no hay wrapper esta vez -->
     <section class="main"></section>
     <aside class="sidebar"></aside>
     <footer></footer>
     header {
     grid-area: header;
     }
     .main {
     grid-area: main;
     }
     .sidebar {
     grid-area: sidebar;
     }
     footer {
     grid-area: footer;
     }

    Entonces podemos configurar nuestra cuadrícula y asignar la ubicación de cada área.

    .container {
     display: grid;
     grid-template-columns: 3fr 1fr;
     grid-template-areas:
     "header header"
     "main sidebar"
     "footer footer";
     grid-gap: 60px;
     }

Hacer Responsive una página

  • Solución en Flexbox. Tendremos que cambiar el flex-direction del wrapper, y ajustar algunos márgenes.
    @media (max-width: 600px) {
     .main-and-sidebar-wrapper {
     flex-direction: column;
     }
     .main {
     margin-right: 0;
     margin-bottom: 60px;
     }
     }

    Esta página es realmente simple, pero en un diseño más complejo habría un montón de cosas que redefinir.

  • Solución en CSS Grid. Con las grid-areas definidas, solo necesitamos reordenarlas en una media-query. Podemos usar la misma configuración de columna.
    @media (max-width: 600px) {
     .container {
     /*  Realinear las áreas de la cuadrícula para un diseño móvil. */
     grid-template-areas:
     "header header"
     "main main"
     "sidebar sidebar"
     "footer footer";
         }
     }

    O podemos redefinir todo el diseño desde cero si creemos que es una solución más limpia.

    @media (max-width: 600px) {
     .container {
     /*  Redefine la cuadrícula en un solo diseño de columna. */
     grid-template-columns: 1fr;
     grid-template-areas:
     "header"
     "main"
     "sidebar"
     "footer";
     }
     }