Esta es una guía paso a paso para crear un diseño web responsive en Grid con CSS.
El diseño web responsive en Grid está creciendo en el soporte del navegador cada día. La rápida adopción del formato Grid ha sido realmente notable.
Antes de que lleguemos a hacer un diseño de portafolio responsive en formato Grid, vamos a aclarar un par de cosas: El formato Grid no es un sustituto de Flexbox. Ni siquiera es un reemplazo. De hecho, puede que te des cuenta de que hemos estado usando Flexbox para hacer cosas que el formato Grid hace mucho mejor. Pero en lugar de pensar en términos de sustitución, podemos pensar en términos de combinación.
Imagina un sándwich de queso y jamón york. El queso y el jamón son muy buenas por sí solas, pero cuando se juntan, nace una nueva cosa y ocurre la magia.
Así son nuestras herramientas de diseño web. Son excelentes en las cosas que hacen individualmente, pero cuando se combinan, la magia sucede y podemos crear nuevos y emocionantes diseños. En este caso, haremos un desarrollo web propio con el formato Grid y Flexbox.
01. Configura tu código HTML
Nuestro diseño no parece gran cosa, pero ya tenemos en su lugar el esqueleto con estos seis artículos.
En este tutorial, vamos a usar CSS Grid y Flexbox juntos para crear un diseño de portafolio que responda a tus necesidades. Cada una de estas cajas tiene un tamaño diferente, algunas de ellas se extienden a través de filas y cada caja tiene un título que se encuentra en la parte inferior. Usaremos algunas de las grandes herramientas de alineación que vienen con Flexbox para hacer que eso suceda.
Empezaremos por establecer nuestro html.
<ul class=”boxes”>
<li>
<div class=”boxes__text-wrapper”>
<h2>Titulo del portafolio</h2>
<p>Aquí la descripción del portafolio</p>
</div>
</li>
</ul>Duplicaremos ese elemento y todo lo que hay en él seis veces para que podamos jugar con él. En caso de que te lo estés preguntando, he decidido usar el elemento ul porque es una lista de entradas. Si lo deseas, puedes usar lo que te parezca correcto.
Dentro del ítem de la lista tenemos un div con la clase .boxes__text-wrapper que contendrá el título del portafolio y la descripción que lo acompaña.
02. Escribe los estilos que necesitas
He establecido nuestra fuente en algo un poco más agradable y he eliminado el margen por defecto de los encabezados y párrafos.
Ahora vamos a establecer algunos estilos de base con los que trabajar.
body {
font-family: Avenir, sans-serif;
margin: 2rem auto;
width: 95%;
}
h2,
p {
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.boxes > * {
padding: .5rem;
background-color: #333;
color: white;
}He cambiado la fuente para que sea Avenir. Eliminaremos el margen de nuestro encabezado y párrafo, y resetearemos la lista desordenada. También le daré a cada elemento de la lista algunos estilos predeterminados para ayudarnos a ver dónde está cada uno.
03. Configura tu diseño web responsive en Grid
Con sólo tres líneas, hemos añadido un margen entre nuestros elementos de Grid y los hemos hecho un poco más altos.
Primero queremos construir nuestro diseño para móviles. Configurar nuestra cuadrícula en pantallas pequeñas es tan fácil como esto:
.boxes {
display: grid;
grid-auto-rows: minmax(125px, auto);
grid-gap: .5rem;
}Grid apilará nuestros artículos uno encima del otro porque por defecto sólo hay una columna. Vamos a crear un espacio entre cada item del portafolio mediante el uso de grid-gap, esto nos permite añadir un margen entre filas y columnas.
Olvídate de añadir un margen a las columnas sólo para necesitar selectores complejos; los márgenes sólo aparecen entre columnas o filas, nunca antes o después de una columna o row.grid-gap es la abreviatura de grid-column-gap y grid-row-gap. Normalmente usamos la abreviatura a mano, pero vamos a sobreescribir ambas a medida que el navegador crece, así que usaremos la abreviatura.
A continuación, utilizaremos las filas automáticas de cuadrícula para indicar a nuestro contenedor de cuadrícula la altura de las filas nuevas. Grid creará nuevas filas para colocar todo nuestro contenido. Podemos controlar el tamaño de estas filas creadas automáticamente con la propiedad grid-auto-rows. Estamos usando una nueva función disponible para nosotros: minmax(). Con minmax() podemos especificar un tamaño mínimo y un tamaño máximo.
Con nuestro código estamos diciendo que queremos que nuestras filas tengan un mínimo de 120px y un máximo de auto. Estamos usando auto aquí porque queremos que nuestras filas crezcan si el contenido lo justifica.
04. Configurar compatibilidad con navegadores de gran tamaño
Nuestra cuadrícula está tomando forma! Tenemos seis columnas con las que trabajar y menos márgenes entre los elementos de nuestra cuadrícula.
Vamos a configurar nuestra página para que cuando nuestro navegador sea 40em o mayor, nuestro contenedor de cuadrícula tenga seis columnas de una fracción cada una.
@media screen and (min-width: 40em) {
.boxes {
grid-template-columns: repeat(6, 1fr);
grid-gap: 2px;
}
}grid-template-columns es la propiedad que usamos para indicar a nuestra cuadrícula cuántas columnas deben existir. Acepta todas las unidades de longitud que conocemos y amamos como rem, em, px, porcentajes, vw, vh y fr.
El fr es una nueva unidad que obtenemos con el formato CSS Grid. Con él, podemos decirle al navegador que haga cálculos en vez de nosotros .
Al decirle al navegador que cree seis columnas de una fracción, el navegador calculará el ancho de nuestro contenedor de cuadrícula y lo dividirá en seis columnas iguales. Además, como Grid es inteligente, sólo dividirá el espacio restante después de calcular el margen que hemos especificado.
05. Estilo de los ítems individualmente
El café hace que todo se vea mejor, ¿no? También un sutil degradado hace que nuestro título y descripción destaquen.
Nuestros items del portafolio parecen un poco monótonos como cajas grises. Añadamos una imagen de fondo, consigamos que nuestros títulos se muestren en la parte inferior de estas cajas y añadamos un degradado para que nuestro título destaque.
.boxes li {
background-image:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),
url(path/to/image);
background-size: cover;
display: flex;
align-items: flex-end;
}Esta imagen de fondo era una imagen libre de Unsplash, pero puedes usar cualquier imagen que desees. También estoy trayendo Flexbox a la mezcla para alinear nuestro texto al fondo de nuestras cajas. Aún no lo verás, pero a medida que coloquemos cada caja diferente, lo verás funcionar.
06. Colocar elementos en la cuadrícula
Grid hace que sea fácil dimensionar nuestros elementos de Grid como queramos. Pero esto es sólo el principio
Desafortunadamente, Grid no tiene una manera de colocar automáticamente los elementos en el diseño de la cuadrícula que vimos al principio. Afortunadamente para nosotros, sin embargo, Grid nos da las herramientas para hacerlo manualmente con bastante facilidad. En este tutorial, usaremos nth-child para colocar cada elemento de la tabla. En un sitio web de producción, aconsejo utilizar una clase que, si se planifica correctamente, permita automatizar diseños como éste en un sitio con mucho contenido.
Empecemos con nuestro primer artículo.
@media screen and (min-width: 40em) {
.boxes li:nth-child(1) {
grid-column: 1 / -1;
grid-row: span 3;
}
}Estaremos poniendo todos nuestros estilos de posición dentro de la consulta de contenidos que escribimos anteriormente porque queremos que este diseño ocurra después de que nuestro navegador tenga 40em o más. Con el enésimo child estamos apuntando al primer elemento de la lista. CSS Grid nos permite colocar fácilmente nuestros artículos con columna de cuadrícula y fila de cuadrícula. Hay muchas maneras diferentes de especificar dónde deben estar los artículos, pero aquí estamos diciéndole a nuestro artículo que empiece en la línea uno de la columna y se extienda por todo el contenedor con -1.
Luego, con la fila de cuadrícula, le decimos al ítem que abarque tres filas. ¿Cómo sabemos que tres filas serán del tamaño que queremos? Bueno, hemos especificado el tamaño de estas filas con cuadrículas automáticas hace unos momentos, y si no estamos contentos con ellas podemos cambiar el tamaño mínimo.
Coloquemos el resto de nuestros artículos.
@media screen and (min-width: 40em) {
.boxes li:nth-child(2) {
grid-column: span 2;
grid-row: span 7;
}
.boxes li:nth-child(3) {
grid-column: span 4;
grid-row: span 3;
}
.boxes li:nth-child(4) {
grid-column: span 2;
grid-row: span 4;
}
.boxes li:nth-child(5),
.boxes li:nth-child(6) {
grid-column: span 2;
grid-row: span 2;
}
}¿No es increíble cuánto control nos da el formato Grid? Con sólo unas pocas líneas de código, podemos crear un diseño completamente responsive que no se romperá si se añaden más elementos.
Claro, pueden parecer un poco torpes porque sólo ocuparán una columna y una fila de la cuadrícula por defecto, pero esto no rompe nuestro diseño. Si estuviéramos haciendo esto con los anchos y alturas fijos, estaríamos en un lío si se añadiera más contenido.
Nuestro diseño está terminado! ¿No es increíble? La cuadrícula nos permite colocar nuestros artículos fácilmente en dos dimensiones.
Un pequeño comentario sobre los navegadores antiguos en diseño web responsive en Grid
Bien, es hora de dirigirse al elemento de la celda. ¿Qué hay de los navegadores antiguos? La respuesta a esta pregunta es la misma que para cualquier característica nueva en CSS: Hay que usar las consultas de características y aceptar la secuencia. Las consultas de características están muy bien soportadas, y donde no lo están, podemos colocar nuestra solución de emergencia en primer lugar. Por ejemplo, escribiríamos algo parecido a:
.your-selector {
display: flex;
}
/* Your Grid code */
@supports (display: grid) {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem 2rem;
}Escribir nuestro código de esta manera significa que si el navegador entiende el diseño de la cuadrícula, lo usará en lugar de Flexbox. Además, debido a que estamos adoptando la combinación, los navegadores que no entienden las consultas de características las ignoran y ya tienen la información que necesitan. Puede que necesitemos planear cómo escribimos nuestros estilos un poco más de lo habitual, pero al hacerlo podemos crear diseños atractivos con soluciones alternativas adecuadas.
Diseño web responsive en Grid CSS en el futuro
Además, a medida que pase el tiempo, sólo habrá más y más soporte para CSS Grid. Piensa en lo genial que sería borrar más tarde nuestras correcciones y dejar todos los CSS relacionados con Grid. A medida que aprendas más sobre Grid, te darás cuenta de que hace muchas cosas que hacemos ahora mismo con muchas menos líneas de CSS.
Y si quieres aprender más sobre diseño web, mi canal de Youtube
Si te apasiona el mundo del diseño web responsive, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉