Este post no pretende ser un tutorial de css grid, en lugar de eso, vamos a explorar como podemos crear layouts modernos usando css grid y su gran aliado flex box.

Si eres "millennials" ó de la "generación x", seguramente te has topado con los problemas de estándar de internet explorer y soñabas con algo tan maravilloso como css grid y flex box y ahora que ya es una realidad estas saltando de un pie como lo estoy haciendo yo en este momento, pero si eres de la "generación z" usar css grid y flex box para ti debe ser lo más natural posible y usar float u overflow debe ser parte de la historia de css.

Revisando aplicaciones y sitios web modernos veo que es la tendencia actual de maquetación web, y decidí profundizar mas en su compresión, por esta razón, estoy explorando formas de crear layouts modernos usando css grid.

Veamos como podríamos maquetar una aplicación como microsoft teams, estos últimas días debido a la pandemia, muchos pasamos varias horas pegados al teams por trabajo remoto.

Pantalla de Chat

la pantalla del chat de ms teams tiene el layout de la siguiente forma.

Layout - screen chat

Para lograr maquetarlo, vamos a definir las áreas y asignarle un nombre a cada área, serán header, aside-nav, aside y main. Divididas en 3 columnas y 2 filas. La primera fila la ocupara el header y la segunda fila las ocuparan las columnas de aside-nav, aside y main.

Llevando esta idea a código usando css grid, quedaría de la siguiente forma:

Ahora definimos el HTML y tendría un contenedor con una clase div.grid-wrapper, e interiormente tendríamos contenedores de áreas y serían header.header, aside.aside-nav, aside.aside y main.main.

<div class="grid-wrapper">
    <header class="header"></header>
    <aside class="aside-nav"></aside>
    <aside class="aside"></aside>
    <main class="main"></main>
</div>

Las propiedades CSS aplicadas.

/* Contenedor principal */
.grid-wrapper {
  display: grid;
  grid-template-columns: 65px minmax(200px, 350px) minmax(300px, auto);
  grid-template-rows: 50px calc(100vh - 50px);
  grid-template-areas:
    "header header header"
    "aside-nav aside main";
}

/* Contenedores de areas */
.header {
  grid-area: header;
}

.aside-nav {
  grid-area: aside-nav;
}

.aside {
  grid-area: aside;
}

.main {
  grid-area: main;
}

Revisemos las propiedades CSS. Para el contenedor principal .grid-wrapper.

  • display: grid, definimos que este contenedor será un grid.
  • grid-template-columns: 65px minmax(200px, 350px) minmax(300px, auto), nuestra grid tendrá 3 columnas, aquí definimos que dimensiones y comportamiento tendrán las columnas en el grid, 65px será el ancho de la primera columna, minmax(200px, 350px) esta función llamada minmax nos ayuda a definir el ancho minímo y máximo de las segunda columna, minmax(300px, auto) definimos el ancho mínimo y el ancho máximo lo dejamos en auto así ocupara el espacio restante.
  • grid-template-rows: 50px calc(100vh - 50px), nuestra grid tendrá 2 filas, aquí definimos que dimensiones y comportamiento tendrán las filas en el grid, 50px será el alto de la primera fila, y calc(100vh - 50px) esta función llamada calc nos ayuda a calcular el alto restante para la segunda fila, usamos 100vh como referencia para poder tener el alto completo de la ventana.
  • grid-template-areas: "header header header" "aside-nav aside main" Aquí definimos las áreas y es donde ocurre la magia, header se repite 3 veces porque va ocupas las 3 columnas de las primera fila. Luego en la segunda definición cada área ocupara una columna respectivamente aside-nav aside main de las 3 columnas de la segunda fila.

Luego añadimos el nombre de cada área, así la plantilla ubicará el área en base a su nombre.

Para los contenedores header, aside-nav, aside y main agregaremos la propiedad grid-area.

  • grid-area: header define el nombre del área como header.
  • grid-area: aside-nav define el nombre del área como aside-nav.
  • grid-area: aside define el nombre del área como aside.
  • grid-area: main define el nombre del área como main.

¡Listo! con esto ya hemos el primer layout. Luego agregando más estilos, la magia CSS, también añadiendo iconos (material icons),  podemos llegar a la maquetación final, que también podrás ver en el siguiente enlace:

Layout 1 - chat screen

Pantalla de trasmisión

La pantalla de transmisión es muy similar a la pantalla de chat, pero vamos a centrarnos en la sección de los participantes de la transmisión, como vemos en la siguiente imagen, se divide en 4 y pensamos en 2 columnas y 2 filas.

Layout 2 - Transmission

Definimos el HTML necesario, un contenedor principal, lo llamaremos .grid-main, y dentro agregamos 4 divs, los cuales contendrán la información de cada participante de la transmisión; como el avatar y el nombre.

<div class="grid-main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Luego añadimos las propiedades CSS necesarias, crear nuestro grid.

/* contenedor principal */
.grid-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 100%;
}

Analicemos las propiedades:

  • display: grid, definimos que este contenedor será un grid.
  • grid-template-columns: repeat(2, 1fr), nuestro grid tendrá 2 columnas, la función repeat nos ayuda a repetir 2 veces el ancho en una fracción 1fr del ancho total del contenedor principal.
  • grid-template-rows: repeat(2, 1fr), nuestro grid tendrá 2 filas, la función repeat nos ayuda a repetir 2 veces el alto en una fracción 1fr del alto total del contenedor principal.
  • height: 100%, definimos el alto 100% del contendor principal, así nuestras filas se ajustaran al contenedor.

¡Listo! ya tenemos nuestro grid para los participantes de la transmisión.

Ahora, vamos a resolver el layout para barra de opciones en la transmisión, que vemos en la parte inferior:

Layout - Transmisión bar

Tenemos un contenedor principal, que llamaremos .bar-trasmission, y dentro agregamos 9 spans, el primer span contendrá el tiempo y luego cada span restante contendrá el icono y la acción inherente.

<div class="bar-transmission">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Ahora veamos las propiedades para el grid de la barra:

/* Contenedor de la barra de transmisión */
.bar-trasmission {
    display: grid;
    grid-template: 1fr / 2fr repeat(8, 1fr);
}
  • display: grid define que la barra se comporte como un grid.
  • grid-template: 1fr / 2fr repeat(8, 1fr) definimos 1 fila y 9 columnas, de esta forma corta usando slash /, lo primero sería fila y lo segundo columna.
    1fr Vendría a ser el alto total definido en una sola fracción.
    Luego la primera columna 2fr tendría una doble fracción ya que el ancho de esta columna es mas grande, luego repetimos 8 veces una fracción 1fr para completar el ancho de las 8 columnas restantes.

Como plus, añadamos las propiedades para el posicionamiento de la barra dentro de la pantalla:

/* Contenedor de la barra de transmisión */
.bar-trasmission {
    display: grid;
    grid-template: 1fr / 2fr repeat(8, 1fr);
    /* Posicionamiento */
    position: fixed;
    left: 50%;
    margin-left: calc(-250px + 65px/2); /* 65px/2 Aside Nav */
    bottom: 100px;
    z-index: 2;
}

Analicemos las propiedades añadidas para el posicionamiento:

  • position: fixed fijamos la barra a la ventana.
  • left: 50% posicionamos a la izquierda al 50% de las ventana.
  • margin-left: calc(-250px + 65px/2) -250px con esto centramos la barra horizontalmente basado en su eje central. +65px/2 consideramos el ancho del area aside-nav que esta ubicada a la izquierda.
  • bottom: 100px, de abajo hacia arriba desplazamos la barra en 100px.
  • z-index: 2, para evitar sobre posición elevamos la capa en 2.

¡Listo! con esto ya hemos terminado el segundo layout. Luego agregando más magia CSS, también añadiendo iconos (material icons),  y llegamos a la maquetación final, que podrás ver en el siguiente enlace:

Layout 2 - transmission screen
Te animo a crear tus propios layout modenos usando css grid, como ves, son súper flexibles y muy agiles.

Visita el proyecto completo en github, y de poder contribuye al código creando nuevos layouts de otras aplicaciones web como slack, twitter, facebook, etc.

modern-css-grid-layouts

Si quieres profundizar más en los conceptos, te recomiendo estos artículos: