CSS Grid VS Flexbox : una comparación práctica

En esta publicación vamos a realizar una comparación rápida entre css grid vs flexbox, creando una plantilla sencilla y comparandolas.

No hace mucho tiempo, el diseño de todas las páginas HTML se realizaba a través de tablas, flotantes y otras propiedades CSS que no eran adecuadas para el diseño de páginas web complejas.

Luego vino flexbox – un modo de diseño que fue específicamente diseñado para crear páginas robustas y receptivas. Flexbox hizo que sea fácil alinear correctamente los elementos y su contenido, y ahora es el sistema CSS preferido de la mayoría de los desarrolladores web.

Ahora tenemos un nuevo contendiente para el trofeo best-system-to-build-html-layouts (el trofeo es un trabajo en progreso). Es la poderosa CSS Grid , y para el final de este mes, estará disponible de forma nativa en Firefox 52 y Chrome 57 , con otros navegadores (con suerte) pronto.

Una prueba de diseño básico

Esta es una pequeña idea de cómo contruir páginas html usando flexbox o Css grids. 

El diseño es bastante básico: consiste en un contenedor centrado, dentro del cual tenemos un encabezado, una sección principal, una barra lateral y un pie de página. Aquí están los principales “desafíos” que tendremos que resolver, mientras que mantenemos CSS y HTML lo más limpios posible:

  1. Colocaremos las cuatro secciones principales del diseño en la página.
  2. Hacer que la página se responsive design (la barra lateral va por debajo del contenido principal en pantallas más pequeñas).
  3. Alinear los contenidos del encabezado – (navegación a la izquierda, botón a la derecha).

Para realizar una simple comparación, se ha mantenido todo muy simple.

Te puede interesar cabecera responsive utilizando flexbox.

Comenzando con el problema 1.

1: posicionar las secciones de la página

Con Flexbox:

Comenzaremos con la solución FlexBox. Añadimos display: flexal contenedor y la dirección a sus hijos verticalmente. Esto colocará todas las secciones una debajo de otra.

  .container {
     display : flex;
    flexión : columna;
}

Ahora tenemos que hacer que la sección principal y que la barra lateral estén una al lado de la otra. Como los contenedores flexibles son generalmente unidireccionales, necesitaremos agregar un elemento contenedor.

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

Luego hacemos la envoltura display:flexy flex-directionen la 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 cual no es difícil de hacer con flex o con porcentajes.

  .main {
       flex : 3 ;
      margen-derecha : 60px ;
  } .sidebar {
      flex : 1 ;
  }

Como puede ver, flexbox lo hizo bastante bien, pero aún necesitábamos bastantes propiedades CSS + un elemento HTML. Veamos cómo funcionará con grid CSS.

CSS Grid Solution

Hay un par de formas diferentes de usar la Grid CSS, pero vamos a ir con la sintaxis grid-template-areas , ya que parece más adecuado para lo que estamos tratando de lograr.

Primero definiremos cuatro grid-area, uno para cada sección de página:

 

  <header></header>
  <!-- Vemos que no necesitamos de un contenedor -->
  <section class="main"></section>
  <aside class="sidebar"></aside>
  <footer></footer>
  header {
       grid-area : header; 
  } .main {
       grid-area : main; 
  } .sidebar {
       grid-area : sidebar; 
  } pie de página {
       grid-area : footer; 
  }

Luego podemos configurar nuestro grid y asignar la ubicación de cada área. El código siguiente puede parecer bastante complicado al principio, pero una vez que conoces el sistema de cuadriculas, es realmente fácil de entender.

  .container {
      display: grid;

      / * Define el tamaño y el número de columnas de nuestro grid.
          La unidad fr funciona de forma similar a flex: las
          columnas fr compartirán el espacio libre en la fila en proporción a su valor.
          Tendremos 2 columnas: la primera será 3 veces el tamaño de la segunda. * /

     grid-template-columns : 3 fr 1 fr;

      / * Asigna las áreas de grid que hicimos anteriormente a lugares específicos en el grid.
        La primera fila es todo encabezado.
        La segunda fila se comparte entre la barra principal y la barra lateral.
        La última fila es todo pie de página. * /

      grid-template-areas:
          "header header"
          "main sidebar"
          "footer footer";

      / * Los canales entre cada celda de la cuadrícula serán 60 píxeles. * /
      
      grid-gap: 60px;
  }

Nuestro diseño ahora seguirá la estructura anterior, y debido a la forma en que lo hemos configurado, ni siquiera tenemos que ocuparnos de los margins o paddins.

Haciendo responsive el diseño.

Con flexbox

La ejecución de este paso está fuertemente relacionada con la anterior. Para la solución de flexbox tendremos que cambiar flex-direction del wrapper y ajustar algunos márgenes.

  @ media (max-width: 600px ) {
     .main-and-sidebar-wrapper {
         flex-direction : column; 
    } .main {
         margin-right : 0 ;
        margen inferior : 60px ; 
    } 
}

La página es realmente simple, por lo que no hay mucho en que trabajar con el diseño ,pero en un diseño más complejo habrá muchas cosas que redefinir para llegar a un objetivo.

Con Grid Css

Como ya tenemos grid-area definido, solo necesitamos reordenarlos en nuestra media-query. Podemos usar la misma configuración de columna.

  @media (max-width: 600px) {
    .container {
    / * Realinea las áreas del grid para un diseño móvil. * / 
        grid-template-areas: 
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

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

  @media (max-width: 600px) {
      .container {
          / * Redefina el gird en un diseño de columna único. * / 
          grid-template-columns: 1fr;
          grid-template-areas:
              "header"
              "main"
              "sidebar"
              "footer";
      }
  }

Alinear los componentes del encabezado.

Con Flexbox

El encabezado incluye algunos enlaces de navegación y un botón. Queremos que el navegador esté a la izquierda y el botón a la derecha. Los enlaces dentro de la navegación deben estar alineados uno al lado del otro.

  <header>
      <nav>
          <li><a href="#"><h1>Logo</h1></a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
      </nav>
      <button>Button</button>
  </header>

Con esta técnica es muy simple.

  header {
      display: flex;
      justify-content: space-between;
  }

Ahora la lista de navegación y el botón están alineados correctamente. Todo lo que queda es hacer que los artículos queden dentro del <nav> horizontalmente. Es más fácil de usar display: inline-block , pero como vamos a usar flexbox completo, apliquemos una solución solo de flexbox:

  header nav {
    display: flex;
    align-items: baseline;
}

¡Solo dos líneas! No está mal. Veamos cómo lo maneja la grid CSS.

Con Grid Css

Para dividir el navegador y el botón tendremos que hacer el encabezado display: grid y configurar una grid de 2 columnas. También necesitaremos dos líneas adicionales de CSS para ubicarlas en los bordes respectivos.

  header{
      display: grid;
      grid-template-columns: 1fr 1fr;
  }
  header nav {
      justify-self: start;
  }
  header button {
      justify-self: end;
  }

Los enlaces están en línea, pero no se pueden alinear correctamente, ya que no hay una opcion baseline como en flexbox align-items. hay que definir algo mas robusto.

  header  nav {
       display : grid;
      grid-template-columns : auto 1 fr 1 fr;
      alinear elementos : final; 
  }

Está claro que Grid CSS lucha con esta parte del diseño, pero se centro al objetivo principal de los contenedores .

Coclusión

  • Las cuadrículas de CSS son excelentes para construir una imagen más grande.
  • Facilitan la administración del diseño de la página, e incluso pueden manejar diseños más poco ortodoxos y asimétricos.
  • Flexbox es excelente para alinear el contenido dentro de los elementos. Use flex para posicionar los detalles más pequeños de un diseño.

  • Use cuadrículas CSS para diseños 2D (filas Y columnas).

  • Flexbox funciona mejor solo en una dimensión (filas O columnas).
    No hay ninguna razón para usar solo Grid CSS o solo flexbox. Aprende ambos y úsalos juntos.

Saludos espero les sirva de algo esta publicación.

Relacionado