Este post no pretende ser un tutorial de css grid, en lugar de esto 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 estandar 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 tí debe ser lo más natural posible y usar float u overflow debe ser parte de la historia de css.

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

Veamos como podriamos maquetar una aplicación como microsoft teams, estos últimas dias 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 areas y asignarle un nombre a cada area, serán header, aside-nav, aside y main. Divididas en 3 columnas y 2 filas. La primera fila la ocupara el header y las segunda fila las ocupran 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 tendriamos contenedores de areas 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 dejeamos 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 areas y es donde ocurre la magía, header se repite 3 veces porque va ocupas las 3 columas de las primera fila. Luego en la segunda definición cada area ocupara una columna respectivamente aside-nav aside main de las 3 columnas de la sgunda fila.

Luego añadimos el nombre de cada area, asi la plantilla ubicará el area 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 area como header.
  • grid-area: aside-nav define el nombre del area como aside-nav.
  • grid-area: aside define el nombre del area como aside.
  • grid-area: main define el nombre del area como main.

¡Listo! con esto ya hemos el primer layout. Luego agregando más estilos, la magía 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 tranmissió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 imagén, 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 contendran 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%;
}

Analizemos 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, asi 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 opciónes 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 contendra el tiempo y luego cada span restante contendra 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 propiedads 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 seria fila y lo segundo columna.
    1fr Vendria a ser el alto total definido en una sola fracción.
    Luego la primera columna 2fr tendria una doble fracción ya que el ancho de esta columna es mas grande, luego repetimos / 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 sobreposición elevamos la capra en 2.

¡Listo! con esto ya hemos terminado el segundo layout. Luego agregando más magía 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 super flexibles y muy agiles.