Pasar al contenido principal

🔥 ¡Hoy! Clase gratis de Diseño web con Bootstrap 😍 Reserva tu lugar. Comienza en:

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

Posicionamiento Grid CSS

Grid CSS

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles del Posicionamiento de Grid CSS, en el articulo anterior donde les daba un introducción a Grid veíamos el concepto de las áreas que es una manera de posicionar los elementos hijos de la retícula, sin embargo no es la única manera de posicionar elementos en Grid, en este artículo haremos el mismo ejercicio que hicimos con Grid Areas en el artículo anterior pero con las técnicas de Grid Lines y Grid Cells, vamos a ello :)

Posicionamiento con Grid Lines

Recordemos que las Grid Lines, se definen como las líneas divisorias que conforman la estructura de la retícula, hay verticales (líneas de columnas) y horizontales (líneas de filas).

Supongamos que tenemos una retícula de 3 columnas por 3 filas, por el concepto anterior eso significa que tendremos 4 líneas de columna por 4 líneas de fila, entonces suponiendo que yo quisiera posicionar un elemento de la retícula en la celda de en medio, tendría que colocarlo entre la líneas de columna 2 y 3 y entre las líneas de fila 2 y 3.

grid lines

Esto expresado en código CSS sería algo así:

.celda {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Como verán los nombres de las propiedades para posicionar las líneas son muy claras y expresivas en sus nombres ;) ahora esto se puede simplificar a:

.celda {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

Estas son las propiedades shorthands de las anteriores y la diagonal entre los números indica la separación entre la línea donde empezará y terminará el elemento hijo de la retícula, como ven sigue siendo muy claro y expresivo ;)

Con la teoría anterior ya podríamos realizar el ejercicio del layout de blog que hicimos con Grid Areas.

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;
}

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.footer {
  grid-column: 1 / 4;
  grid-row: 3 / 4;  
}

.main {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
    
.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

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-column y grid-row definimos el posicionamiento de cada elemento:

  • el hijo .header ocupará de la línea de columna 1 a la 4 y de la línea de fila 1 a la 2
  • el hijo .sidebar ocupará de la línea de columna 1 a la 2 y de la línea de fila 2 a la 3
  • el hijo .main ocupará de la línea de columna 2 a la 4 y de la línea de fila 2 a la 3
  • el hijo .footer ocupará de la línea de columna 1 a la 4 y de la línea de fila 3 a la 4

A continuación puedes ver el ejemplo en vivo :).

Posicionamiento con Grid Cells

Recordemos que las Grid Cells, se definen como el espacio entre dos líneas de filas adyacentes y dos líneas de columnas adyacentes, es una sola "unidad" de la retícula.

Otra manera de posicionar los elementos con grid-column y grid-row es indicar cuantas celdas ocuparán anteponiendo la palabra span al número de celdas que queremos que ocupe.

Esta técnica tiene un inconveniente y es, que depende de cómo se han definido los elementos de la retícula en el HTML, entonces para que nuestro ejercicio del blog funcione igual que con las áreas y las líneas tenemos que hacer una pequeña modificación al código HTML.

Código HTML:

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

Como se darán cuenta, he invertido el orden del sidebar y el main, ya que el que aparece primero en nuestro ejemplo de estructura de blog, es el sidebar y con la técnica de los spans, no podemos modificar el orden de apariencia de los elementos HTML sólo podemos indicar cuantas celdas ocupará, a partir de que se visualiza y posiciona en el documento, este es el único inconveniente que tiene está técnica con respecto de las áreas o las líneas

Código CSS:

 .app {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 5rem 1fr 5rem;
  grid-gap: 1vw;
}

.header {
  grid-column: span 3;
  grid-row: span 1;
}

.footer {
  grid-column: span 3;
  grid-row: span 1;  
}

.main {
  grid-column: span 2;
  grid-row: span 1;
}
    
.sidebar {
  grid-column: span 1;
  grid-row: span 1;
}

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-column y grid-row definimos el posicionamiento de cada elemento:

  • el hijo .header ocupará 3 columnas y 1 fila a partir de su posicionamiento en el documento HTML
  • el hijo .sidebar ocupará 1 columna y 1 fila a partir de su posicionamiento en el documento HTML
  • el hijo .main ocupará 2 columnas y 1 fila a partir de su posicionamiento en el documento HTML
  • el hijo .footer ocupará 3 columnas y 1 fila a partir de su posicionamiento en el documento HTML

A continuación puedes ver el ejemplo en vivo :).

Cómo verán Grid CSS nos permite varias formas y técnicas para posicionar los elementos de una retícula, personalmente no tengo una favorita, ya que en la práctica he utilizado las 3 formas (áreas, líneas y celdas) dependiendo de las necesidades y características de maquetación que tengan los proyectos puede ser que una técnica sea más optima que las otras, pero recuerden que en este maravilloso mundo de la web no tenemos verdades absolutas, por ejemplo, suelo usar más las áreas cuando voy a definir la estructura básica de maquetación de un sitio y las líneas y celdas para resolver la maquetación de elementos internos de esas áreas ya definidas.

En fin, cuando pongan en práctica el posicionamiento de los elementos en Grid, ustedes mismos se darán cuenta de cuando conviene utilizar una técnica y cuando no ;).

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