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

Flexbox o Grid son dos  mecanismos de CSS que resultan especialmente útiles de cara a la creació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 es aprender ambos y usarlos juntos.

En qué destaca Grid

• 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

• 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 para diferenciar Flexbox o Grid

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';
   }
   }

Publicado el 18/04/2024 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.