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: 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.
