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

En las últimas semanas hemos hablado bastante de Flexbox, uno de los mecanismos de CSS más útiles de cara a la  maquetación de páginas web. Sin embargo, nos quedaba compararlo con Grid, otra de las opciones que nos permiten llevar más allá las posibilidades de CSS, algo que hacemos en este artículo. Y, sólo por enfrentarlos en una primera pasada, 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";
     }
     }
Compartir

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *