Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En este tutorial vamos a usar CSS Grid para ayudarnos a crear un "diseño de retícula irregular", algo que siempre ha sido complicado con los métodos tradicionales de CSS.
Aquí tienes lo que queremos conseguir (echa un vistazo a la versión ampliada para ver todo el efecto):
El diseño está basado en el trabajo de Anthony Hamon, que es perfecto para nuestra explicación. Echa un vistazo a este diseño que realizó para Rel Acoustics:
Diseño Gráfico en la Web
Los diseñadores web han estado condicionados durante años al tener que plegarse al orden del código fuente y a su flujo natural; creando diseños de página mediante bloques flotantes y permitiéndoles ocupar la página mediante bloques de construcción. En el mundo del diseño responsivo este enfoque parece natural. Sin embargo, está muy lejos de la maquetación impresa en la que los diseñadores pueden ubicar tranquilamente el texto y las imágenes exactamente donde quieran, lo que produce diseños más experimentales y audaces visualmente.
Grid CSS, además de permitirnos organizar los elementos a lo largo del eje horizontal (x) y vertical (y), puede ayudarnos a reducir las limitaciones en la maquetación y nos permite ser más atrevidos en nuestros diseños.
"Tenemos que empezar a reimaginar lo que el buen diseño gráfico puede lograr fusionando soluciones." – Jen Simmons
Es hora de zambullirse.
1. Definir la Retícula o Grid
Las columnas de la retícula no tienen porque ser uniformes. Escojamos una sección del anterior diseño e imaginemos qué aspecto podría tener la retícula.
Nota: en este tutorial estamos construyendo solo una de las secciones. Cada sección de la página podría, si lo deseásemos, construirse a partir de retículas independientes.
Vamos a empezar con algo de código para la estructura, un contenedor grid:
1 |
<section class="grid1"> |
2 |
|
3 |
</section>
|
Ahora, en el contenedor, vamos a hacer la siguiente declaración display: grid;, después definimos las columnas y las filas.
1 |
.grid1 { |
2 |
display: grid; |
3 |
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; |
4 |
grid-template-rows: 100px auto 15px auto auto; |
5 |
}
|
Las columnas se distribuyen tal y como ves en la imagen de arriba. La unidad fr es una fracción de la anchura total, así que la primera columna ocupa tres de esta unidades, la segunda es más ancha, ocupando seis. En total nuestro diseño tiene una anchura dividida en 27 unidades, ¡no es una proporción muy habitual para las retículas!
Con las filas sucede algo un poco distinto. Como puedes ver hay una mezcla de medidas fijas expresadas en pixels, pero también empleamos auto. Cuando usamos auto, la altura de la fila crecerá y menguará dependiendo de su contenido.
2. Incluir las Imágenes
Empecemos con las imágenes. Para el código de la estructura tenemos un par de opciones; o usamos los elementos img, o usamos otros elementos con una imagen en el fondo.
Podríamos usar object-fit: cover; en los elementos img, pero esto es engañoso, ¿por qué complicarnos las vida? Así que para este ejemplo vamos a continuar con esta última opción, ya que nos proporciona más flexibilidad en cuanto a las proporciones de las imágenes en retículas flexibles.
Saluda a algunos ya conocidos divs:
1 |
<div class="img1"></div> |
2 |
|
3 |
<div class="img2"></div> |
4 |
|
5 |
<div class="img3"></div> |
Con algunas imágenes de fondo que los cubren:
1 |
.img1 { |
2 |
background: url(wooden.jpg); |
3 |
background-size: cover; |
4 |
}
|
5 |
|
6 |
.img2 { |
7 |
background: url(speaker.jpg); |
8 |
background-size: cover; |
9 |
}
|
10 |
|
11 |
.img3 { |
12 |
background: url(waves.jpg); |
13 |
background-size: cover; |
14 |
}
|
3. Colocar las Imágenes
El algoritmo de Grid que ubica de forma automática los elementos ya los habrá colocado limpiamente en nuestra retícula, pero seamos más específicos. Vamos a usar las líneas de la retícula grid para indicar dónde debería empezar y terminar cada elemento.
Nuestra primera imagen empieza en la línea de la columna 1, y termina en la número 3. Podemos definir esto de la siguiente forma:
1 |
grid-column: 1 / 3; |
o así:
1 |
grid-column: 1 / span 2; |
En cuanto a las filas, nuestra primera imagen necesita empezar en la línea de fila número 2 y termina en la número 5, algo que podemos indicar de la siguiente forma:
1 |
grid-row: 2 / 5; |
o así:
1 |
grid-row: 2 / span 3; |
Hagamos ahora lo mismo para nuestras otras dos imágenes. Este es el resultado que deberías haber obtenido al terminar:
Lo admito, no es muy impresionante, pero se debe a que la mayoría de las filas todavía no tienen asignada ninguna altura. La tendrán una vez hayamos añadido más contenido en el siguiente paso.
Para saber más sobre cómo funcionan grid-column y grid-row, consulta estos breves tutoriales:
CSS Grid LayoutCSS Grid Layout: Usar Áreas Grid
CSS Grid LayoutTruco Rápido: Nombra las Líneas de Tu CSS Grid, Por Si Acaso
4. Añadir Más Contenido
Añadamos ahora el texto; una cita, blockquote, dentro de un contendor, y la invocación al bloque de acción. Puedes añadirlos siempre que quieras como elementos hijos del contenedor .grid1, el orden en que lo llames no importa.
1 |
<div class="strapline"> |
2 |
<blockquote>“Almost immediately, word spread of a Welshman who had built this incredible sounding sub bass system, and soon enough audiophiles began searching out these legendary subs that were built like no other.”</blockquote> |
3 |
</div>
|
4 |
|
5 |
<div class="cta-wrapper"> |
6 |
<div class="cta"> |
7 |
<h1>Gibraltar</h1> |
8 |
<p>Introducing 212/SE, our most powerful and agile subwoofer, designed exclusively for larger systems and rooms to allow superior state of the art speakers to spring to full voice.</p> |
9 |
<a class="button" href="">View Product Details →</a> |
10 |
</div>
|
11 |
</div>
|
Después, antes de aplicar cualquier estilo, los posicionamos en la retícula de igual forma que hicimos con las imágenes:
1 |
.strapline { |
2 |
grid-column: 3 / span 3; |
3 |
grid-row: 2 / span 1; |
4 |
}
|
5 |
|
6 |
.cta-wrapper { |
7 |
grid-column: 4 / span 2; |
8 |
grid-row: 4 / span 2; |
9 |
}
|
¡Ya tiene mejor aspecto!
Hay que señalar que si quisieses, ahora podrías jugar con z-index. Los bloques se apilan por defecto siguiendo el orden de origen; lo que aparece antes en el código que define la estructura se colocará al final, lo que se declara en último lugar se sitúa en la parte superior. Pero si aplicásemos z-index: 1; a .img1, éste colocaría por encima de .img2.
5. Usar el Inspector
Abrir el inspector del navegador te será muy útil para entender la retícula. En el inspector de Chrome, al seleccionar los elementos podrás comprobar sus medidas y las líneas que definen la retícula, como muestra la siguiente imagen:
El inspector de Firefox hará incluso más, te permitirá superponer la retícula mediante controles que encontrarás dentro de la pestaña Layout. Podrás mostrar los números de las líneas, los nombres de las áreas y navegar a través de las áreas de la retícula en una versión en miniatura:
Consejo: cuando estés mirando la pestaña Rules, pulsa el icono correspondiente a la retícula que está junto a display para cambiar la vista.
Al inspeccionar la retícula, si has colocado mal cualquier elemento, por ejemplo si te has saltado alguna fila o has nombrado algo de forma incorrecta, te darás cuenta enseguida.
6. Aplicar Estilo al Contenido
Aplicando algunas declaraciones a las fuentes y añadiendo estilos de botón lograremos que esto tenga, sin demasiado esfuerzo, mucho mejor aspecto. Vamos a empezar vinculando algunas fuentes en el <head> del documento:
1 |
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,400i,700" rel="stylesheet"> |
Estamos usando la fuente Open Sans para el cuerpo y Playfair Display para la cita y el titular. Apliquémoslas a los elementos:
1 |
body { |
2 |
color: #292929; |
3 |
font: 1em/1.7 'Open sans', sans-serif; |
4 |
}
|
5 |
|
6 |
blockquote { |
7 |
font: italic 1.1em/2 'Playfair Display', serif; |
8 |
margin: 0 0 2em 0; |
9 |
}
|
10 |
|
11 |
.cta h1 { |
12 |
font: bold 6em/1 'Playfair Display', serif; |
13 |
margin: 0 0 20px 0; |
14 |
position: relative; |
15 |
}
|
Ahora apliquemos algunos estilos de botón:
1 |
.button { |
2 |
display: inline-block; |
3 |
color: white; |
4 |
text-decoration: none; |
5 |
background: #292929; |
6 |
padding: .8em 1.5em; |
7 |
}
|
8 |
|
9 |
.button:hover { |
10 |
background: black; |
11 |
}
|
Por último, centramos la cita, el elemento blockquote, y después añadimos padding a la llamada a la acción, haciendo que ocupe toda su fila. Aquí tienes el aspecto que debería tener ahora:
Ten en cuenta que estamos creando nuestro diseño para pantallas anchas. Es posible que lo que ves incluido en el tutorial no tenga un aspecto óptimo.
7. Añadir Florituras Visuales
El diseño que queremos conseguir necesita un par de adornos visuales que todavía no hemos incluido. Podríamos añadirlos de distintas formas, pero como no se trata de contenido, los vamos a añadir usando pseudo elementos CSS. Primero, la línea ondulada situada sobre la cita:
1 |
.strapline { |
2 |
margin-top: 100px; |
3 |
position: relative; |
4 |
}
|
5 |
|
6 |
.strapline::before { |
7 |
content: ''; |
8 |
display: block; |
9 |
background: url(wavy.svg) repeat-x; |
10 |
background-size: cover; |
11 |
width: 20%; |
12 |
height: .5em; |
13 |
position: absolute; |
14 |
top: -3em; |
15 |
left: 40%; |
16 |
}
|
Estos estilos usan un pseudo elemento ::before en el div .streapline, colocándolo sobre el propio contenedor mediante un posicionamiento negativo. Está perfectamente centrado, y recordarás que le dejamos suficiente hueco al haber definido que nuestra primer fila tenga una altura de 100px.
Vamos a hacer algo similar para colocar una insignia SVG en el titular:
1 |
.cta h1::before { |
2 |
content: ''; |
3 |
display: block; |
4 |
height: 1em; |
5 |
width: 1em; |
6 |
background: url(badge.svg) no-repeat center center; |
7 |
background-size: 80%; |
8 |
position: absolute; |
9 |
left: -120px; |
10 |
top: 0; |
11 |
}
|
De nuevo, estamos usando un pseudo elemento, ya que se trata de un ornamento visual no contenido relevante. No hace falta decir que podrías haberlo añadido, por ejemplo, como elemento <img> dentro del código. Después podrías haber usado CSS Grid o Flexbox para ubicar los contenidos dentro de la llamada a la acción, ¡tienes muchas opciones disponibles!
¡Acabamos de crear un sólido diseño de retícula irregular! Es hora de avanzar para llevarlo más lejos.
8. Siguientes pasos: Compatibilidad en Navegadores
Hoy en día CSS Grid es ampliamente admitido, aunque IE11 todavía necesita una alternativa con prefijos, así que podrías querer reunir los estilos de tu retícula en una declaración @supports. Ésta tendría el siguiente aspecto:
1 |
@supports (display: grid) { |
2 |
|
3 |
/* grid layout */
|
4 |
.grid1 { |
5 |
display: grid; |
6 |
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; |
7 |
grid-template-rows: 100px auto 15px auto auto; |
8 |
}
|
9 |
|
10 |
...
|
11 |
|
12 |
}
|
Cualquier navegador que no muestre CSS Grid de forma correcta ignorará cualquier regla contenida en esta declaración, ofreciéndote la opción de proporcionar una solución alternativa.
Echa un vistazo a las alternativas ("fallbacks") y sustituciones disponibles para Grid, así obtendrás algunas ideas sobre cómo y qué estilos puedes aplicar a las mismas.
9. Siguientes Pasos: Hacerlo Responsivo
Nuestro diseño tiene un aspecto perfecto en pantallas grandes, pero cuando lo estrechas para visualizarlo en pantallas pequeñas, como cuando lo incrustamos en la columna de este tutorial, aparecen algunos fallos. ¿Cómo lo convertirías en un diseño responsivo? Añadir media queries te permitirá establecer primero los estilos, para después ir construyendo gradualmente y haciendo la retícula más compleja conforme la ventana de visualización se vaya ampliando:
1 |
.grid1 { |
2 |
display: grid; |
3 |
grid-template-columns: 1fr 1fr; |
4 |
}
|
5 |
|
6 |
@media only screen and (min-width: 768px) { |
7 |
|
8 |
.grid1 { |
9 |
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; |
10 |
grid-template-rows: 100px auto 15px auto auto; |
11 |
}
|
12 |
|
13 |
}
|
También podrías optar por ocultar estos detalles ornamentales en las pantallas pequeñas, reservándolos hasta que haya más espacio disponible. ¡Tú eliges!
Aquí tienes un ejemplo de cómo podrías crear, en concreto, este diseño responsivo.
Conclusión
Este tutorial te ha proporcionado una visión rápida sobre diseños alternativos que puedes conseguir con CSS Grid. Olvídate de las maquetaciones que has creado hasta ahora usando floats y el posicionamiento; ¡rompe con esos viejos hábitos! Explora diseños más intrincados y veamos si podemos hacer la web un poco más interesante.
Más Diseños con CSS Grid
By
