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:
- Colocaremos las cuatro secciones principales del diseño en la página.
- Hacer que la página se responsive design (la barra lateral va por debajo del contenido principal en pantallas más pequeñas).
- 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: flex
al 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.