Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Introducción a Grid CSS

css grid

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles de las cosas increíbles que podemos hacer a nivel de maquetación con Grid CSS :O.

Si traducimos Grid al español significa, red, cuadrícula, rejilla, retícula; para efectos de este artículo le llamaremos retícula que desde mi punto de vista es el término que más se adapta a lo que aplica en CSS.

Algunos podrían encontrar muchas similitudes con Flexbox, pero hay una diferencia fundamental: Flexbox es unidimensional, es decir maneja filas o columnas pero no ambas al mismo tiempo.

En cambio Grid CSS es al fin, un módulo de maquetación bidimensional, por lo que podemos manejar columnas y filas simultáneamente.

Términología Grid

Al igual que con Flexbox lo primero que debemos entender es la terminología que se maneja:

  • Container:  (Contenedor Grid) es el elemento en el que se visualiza Grid CSS. Es el padre directo de todos los elementos de la retícula.
  • Items: (Elementos de Grid) son los hijos (descendientes directos) del contenedor Grid, un elemento hijo de un contenedor Grid a su vez puede ser contenedor Grid de sus elementos hijos, es decir, Grid CSS se puede anidar.
  • Lines: (Líneas de Grid) son las líneas divisorias que conforman la estructura de la cuadrícula. Pueden ser verticales (líneas de columna) u horizontales (líneas de fila). Residen en cualquier lado de una fila o columna.
  • Tracks: (Carriles de Grid) es el espacio entre dos líneas de cuadrícula adyacentes, puedes pensar en ellos como cada columna y fila de la retícula.
  • Cells: (Celdas de Grid) es el espacio entre dos líneas de filas adyacentes y dos líneas de columnas adyacentes, es una sola "unidad" de la retícula.
  • Areas: (Áreas de Grid) es un área de la retícula formada por cualquier número de celdas, siempre son cuadradas o rectangulares.
Terminología Grid
Terminología Grid

Ahora que ya sabes los términos que intervienen en Grid CSS, revisemos las propiedades básicas para comenzar a maquetar :).

 

Básicos de Grid

 

1. Definir el contenedor

Todo comienza creando un contenedor de retícula declarando la propiedad display con el valor de grid.

.container {
  display: grid
}

Tan pronto como lo hacemos todos los hijos directos de ese elemento se convierten en elementos de la retícula, todas las propiedades que afectan el comportamiento de la retícula se definen en el elemento padre, como verán funciona con la misma filosofía que Flexbox.

 

2. Añadir carriles (filas y/o columnas)

Para comenzar a formar una estructura bidimensional, tenemos que definir carriles (filas y columnas) de retícula.

Las propiedades que se utilizan son:  grid-template-columns y grid-template-rows, para añadir respectivamente columnas y filas.

Podemos aplicar cualquier unidad de medida: pixeles, porcentajes, ems, rems unidades del viewport o la nueva unidad que viene con Grid llamada fracción.

Una fracción (fr) es una porción proporcional del espacio sobrante ?_? … ¿eh? … no te preocupes más abajo damos un ejemplo de ella ;).

¿Quieres un poco de espacio alrededor de los elementos de la cuadrícula? Usamos las propiedades grid-column-gap y grid-row-gap o su shorthand grid-gap inidicando primero el valor para row y luego el valor para column o en su defecto, un solo valor para ambos espacios.

.container {
  display: grid;
  grid-template-columns: 100px 6rem 1fr 20vw;
  grid-template-rows: repeat(3, auto);
  /*
    grid-row-gap: 1rem;
    grid-column-gap: 2rem;
  */
  grid-gap: 1rem 2rem;
}

Cuando tus columnas o filas vayan a tener la misma proporción o tamaño puedes usar la función repeat(), que recibe 2 parámetros:

  1. el número de filas o columnas a crear y
  2. su tamaño o proporción

En el ejemplo anterior creamos 3 filas con tamaño automático. A continuación puedes ver el ejemplo en vivo :).

 

3. Definir Áreas

Otra cosa que podemos hacer con Grid CSS es definir áreas de retículas semánticamente definidas, lo que es alucinante  \(Ö)/ ve que fácil es armar una típica estructura de blog con cabecera, contenido principal, lateral y pie de página, gracias a las propiedades:

  • grid-template-areas: que define la estructura de la retícula y a
  • grid-area: que asigna el nombre de un área a algún elemento hijo de la retícula.

Código HTML:

<article class="app">
  <header class="header"><h2>Header</h2></header>
  <main class="main"><h2>Main</h2></main>
  <aside class="sidebar"><h2>Sidebar</h2></aside>
  <footer class="footer"><h2>Footer</h2></footer>
</article>

Código CSS:

 .app {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 5rem 1fr 5rem;
  grid-gap: 1vw;
  grid-template-areas: 'header header header'
                       'sidebar main main'
                       'footer footer footer';
}

.header { grid-area: header; }

.footer { grid-area: footer; }

.main { grid-area: main; }
    
.sidebar { grid-area: sidebar; }

Lo que hacemos primeramente es definir que .app es una retícula de 3 columnas (cada una de una fracción, es decir, del mismo tamaño) por 3 filas (la primera y la tercera de 5rem y la segunda de la fracción sobrante después de haber restado el valor de la primera y la tercera, en este caso nuestra fracción ocupará el espacio restante del contenedor después de haber quitado los 10rem de las otras columnas).

Posteriormente con grid-template-areas definimos semánticamente que:

  • el hijo .header ocupará las 3 columnas de la fila 1
  • el hijo .sidebar ocupará la columna 1 de la fila 2
  • el hijo .main ocupará las columnas 2 y 3 de la fila 2 y
  • el hijo .footer ocupará las 3 columnas de la fila 3

¿Brujería?... NO, es el poder de Grid CSS, si lo analizas de otra manera es como si estuvieras moviendo piezas de un tablero de ajedrez o jugando guerra de submarinos; o también como si estuviéramos dibujando un tabla en Word o pintando y combinando celdas en Excel ;).

Al principio, Grid es un gran cambio de paradigma de la forma en cómo veníamos maquetando, pero una vez que entiendes los conceptos y las reglas básicas, verás que puedes maquetar cualquier tipo de interfaz, sólo es cuestión de prática para que domines Grid CSS.

A continuación puedes ver el ejemplo en vivo J.

Con Grid CSS es mucho más fácil, explícito y estructurado definir la maquetación de un proyecto web.

Recuerda que en EDteam, tenemos un Curso de CSS Avanzado donde te enseñamos a profundidad los conceptos de Grid y Flexbox y como combinarlos para lograr diseños espectaculares.

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... ...bye ;)

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal