Introducción a CSS Grid Layout

¿Qué es Grid?

Cuando hablamos de CSS Grid Layout estamos hablando del sistema que actualmente reina de todos los disponibles en CSS, el que es sin duda actualmente más poderoso.

Si en el artículo anterior de introducción a Flex Box, ya pudimos ver gran parte de la potencia que nos ofrece Flex Box, el sistema unidireccional más potente de la actualidad. En este artículo, os presentaremos a CSS Grid Layout (también conocido como CSS Grid) el sistema bidimensional que actualmente reina por encima de todos los disponibles en CSS (incluido Flex Box), el más poderoso.

Preparando nuestra parrilla de Grid

Vamos a ver un ejemplo de cómo preparar nuestra plantilla de Grid. Para ello, partiremos del siguiente HTML:

Y comenzamos con el CSS, en flex box ya vimos que trabajábamos sobre un elemento padre, en Grid Layout la manera de trabajar es “similar, pero con unos matices propios” trabajaremos en una especie de parrilla. Por lo que, el div que acabamos de crear (que será nuestro div que contenga la parrilla), le indicaremos que será de tipo grid con la propiedad de CSS display: grid.

Para realizar este tutorial trabajaremos con Mozilla Firefox como navegador ya que nos permite trabajar mejor que con Grid debido a que dispone de alguna herramienta que nos permite ver los márgenes, etc. y que no encontramos en todos los navegadores.

De hecho, si abrimos el documento HTML en Firefox, podemos ver que ya podemos ver nuestra parrilla (también conocida como grilla o cuadricula) que acabamos de definir.

Una vez tenemos la parrilla al ponernos encima vemos que solamente tenemos un cuadro, en Flex Box ya vimos que era el momento de crear a los hijos. Pero a diferencia de Flex Box, Grid está basado en cuadrículas, y vamos a crear el propio desde CSS.

Ejercicio vistas mobile, tablet y desktop

Vamos a ver hacer un ejercicio:

Tenemos que realizar la vista 3 ya que nos piden 3 vistas para 3 dispositivos. Os animo a una vez realicemos la vista de desktop y una vez realizada, realicéis las otras dos vosotros solos. ¿Os animáis? Solucionaremos las 3 pero así asimilareis mejor los conceptos.

Vista Desktop (min-width: 1024px)

Como Grid es un sistema basado en cuadrícula, tenemos que pensar en cuadros y mirando la siguiente imagen:

 

Podemos ver que tenemos 4 columnas y 5 filas. Por ello, vamos a nuestro CSS y escribimos lo siguiente:

Si vamos al navegador (¡Firefox recordad!), podemos ver los bordes de las columnas que hemos definido:

¿Cuántos cuadrados tenemos? Si tenemos 4 columnas y 5 filas si lo multiplicamos tenemos un total de 20 cuadros.

De hecho, si nos ponemos encima de los cuadros que nos aparecen en la ventana del inspector del navegador podemos ver que se nos selecciona también dentro de la web. Este tipo de herramientas son los que como ya dijimos no ofrecen todos los navegadores, por ello, Grid y Mozilla son mejores amigos.

Tenemos que hacer divs, pero no necesitamos 20, ya que algunos de los div utilizaran más de un cuadrado. Un ejemplo de ello es el div de menú que ocupará 3.

Vamos a realizar un total de 7 divs, para ello, usaremos un pluggin que viene preinstalado de VSC → llamado Emmet. Si escribimos esto y pulsamos control espacio y pulsamos sobre emmet:

Nos ha facilitado mucho el escribir el código, el resultante será:

Vamos a empezar con la fila 1, en la que tenemos dos columnas una que ocupará 1 cuadrado (el header) y otra que ocupará 3 cuadros (el menú).

Si ahora miramos el navegador, esto ya va cogiendo otro color, nunca mejor dicho:

El código resultante de la vista desktop será:

Y el resultado:

Si modificamos el HTML y le ponemos el nombre a cada uno de los contenedores:

Y volvemos a añadir la grilla para ver los recuadros, podemos ver lo que hemos hecho para esta resolución:

Hemos añadido una media query que controla si la resolución es mayor que 1024px en caso contrario, podemos ver que los estilos no se aplican:

Vista Tablet (min-width: 720px &max-width: 1023px)

Si miramos la vista tablet, podemos ver que tenemos 5 filas y 3 columnas, lo que hará un total de 15 cuadrados en nuestra parrilla. Pero seguimos necesitando solamente 7 divs.

El resultado será:

Vista Mobile (max-width: 719px)

Si miramos la vista mobile, podemos ver que tenemos 7 filas y 1 columnas, lo que hará un total de 7cuadrados en nuestra parrilla. Y nosotros tenemos 7 divs, así que perfecto.

En la vista mobile, tenemos que construir una estructura de 1 sola columna y 7 filas. Vamos a imaginar que todas son iguales, ya que esto nos permitirá ver como trabajar con una alternativa mucho más elegante a los % para añadir los valores a grid-template-columns, los fr.

Ya que los fr, nos permiten subdividir el ancho (hacen lo mismo que los %) de columnas o filas en tantos cuadraditos como fr le añadamos. Pero con la diferencia que en los % tenemos que calcular nosotros las dimensiones que ocupa cada uno de los cuadrados. Esto, puede provocar que en según que casos sea difícil trabajar con ellos, en cambio con fr, si solamente ponemos 1fr este ocupará todo el ancho de la pantalla, si queremos subidibidir el ancho entre 3 utilizamos fr fr fr (los tres cuadrados resultantes serán iguales). E incluso, si tenemos muchos fr podemos usar repeat(5, 1fr), que nos generará 5 cuadrados iguales.

Vamos a realizar la vista mobile con fr:

Vemos que el grid-template-columns, al solo haber un fr, este ocupa toda la anchura de la columna. Y en cambio, si utilizamos % tendríamos que hacer cálculos más engorrosos. Por ello, hemos utilizado fr.

También existen mecanismos para que no todos los fr tengan las mismas dimensiones, pero no los veremos en este artículo por el momento. 

El resultado final será:

En este ejemplo, además, hemos visto la potencia de combinar CSS Grid Layout con Flex Box. Con CSS Grid hemos realizado la estructura de las vistas. Y con Flex Box hemos centrar el texto de los divs.

Podéis ver el código de mi ejemplo al completo en: https://github.com/DavidBernalGonzalez/grid-responsive-template/settings

O bien, descargaremos el proyecto en: https://github.com/DavidBernalGonzalez/grid-responsive-template

Espero que os haya gustado, en próximas clases veremos más Grid. Saludos y hasta la próxima

 

 

 

14 comentarios

  1. Asking questions are really nice thing if you are not understanding anything
    entirely, however this piece of writing presents nice understanding even.

  2. Genuinely when someone doesn’t be aware of then its up to other users that they will assist, so here
    it occurs.

  3. Howdy I am so grateful I found your webpage, I really
    found you by mistake, while I was searching on Aol for something else,
    Anyhow I am here now and would just like to say kudos
    for a incredible post and a all round entertaining blog (I also love the theme/design), I don’t
    have time to look over it all at the moment but I have
    book-marked it and also included your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the superb job.

  4. Wow, this article is fastidious, my younger sister is analyzing such things, therefore I am going to inform her.

  5. I all the time used to study post in news papers but now as I am a user
    of web thus from now I am using net for articles, thanks to web.

  6. I’m really enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me
    to come here and visit more often. Did you hire out a developer
    to create your theme? Excellent work!

  7. Today, while I was at work, my cousin stole my iPad and tested to see if it can survive a
    40 foot drop, just so she can be a youtube sensation. My iPad is
    now destroyed and she has 83 views. I know this is completely off topic but I had to share it with someone!

  8. Excellent blog! Do you have any hints for aspiring writers?
    I’m planning to start my own website soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like WordPress or
    go for a paid option? There are so many choices out there
    that I’m totally confused .. Any suggestions?
    Kudos!

  9. Write more, thats all I have to say. Literally, it seems as though you
    relied on the video to make your point. You clearly know what youre talking about, why waste
    your intelligence on just posting videos to your blog when you could be giving us something informative to read?

  10. of course like your web-site however you need to test
    the spelling on several of your posts. Many of them are rife
    with spelling issues and I find it very bothersome to inform the reality however I’ll
    definitely come again again.

  11. Your style is very unique in comparison to other people I have
    read stuff from. Thanks for posting when you have the opportunity, Guess I will just book mark this web site.

  12. Excellent blog! Do you have any tips for aspiring writers?
    I’m planning to start my own blog soon but I’m a little lost on everything.
    Would you propose starting with a free platform like WordPress or go for
    a paid option? There are so many options out there that I’m
    totally confused .. Any suggestions? Thanks a lot!

  13. I’ve been exploring for a bit for any high-quality articles or blog
    posts on this kind of area . Exploring in Yahoo I eventually stumbled upon this
    site. Studying this information So i am happy to show that I have
    a very excellent uncanny feeling I found out just what I needed.

    I most unquestionably will make certain to do
    not put out of your mind this site and give it a look on a constant basis.

  14. I’ll right away seize your rss feed as I can’t
    find your e-mail subscription hyperlink or newsletter service.
    Do you’ve any? Please allow me understand in order that I may subscribe.
    Thanks.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar