Pasar al contenido principal

Responsive Design con Grid CSS y sin Media Queries

Responsive Design con Grid CSS

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles de como hacer Responsive Design con las características de Grid CSS y sin la necesidad de utilizar Media Queries.

He tomando como referencia un espectacular artículo en inglés de Tim Wright que pueden encontrar en CSS karma.

El diseño web evoluciona con bastante rapidez. Respecto al mundo de la maquetación: primero usamos tablas, luego, flotadores y posicionamientos, también apareció brevemente el bloque en línea, seguido del extraordinario Flexbox. Ahora tenemos Grid CSS que viene a resolver el problema de crear diseños exactos y flexibles de una manera muy sencilla gracias a todas las nuevas características que trae consigo.

Ya hay un montón de grandes artículos por ahí explicando en profundidad lo que se puede hacer con Grid CSS, en esta ocasión me centraré en algunas cosas específicas y mágicas en la siguiente declaración CSS:

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
  grid-gap: 10px;
}

Esta regla hace muchas cosas geniales y si tú puedes entenderla, ya tienes una gran comprensión de cómo utilizar Grid CSS en la práctica de sitios responsivos. Si no la entiendes, no te preocupes, en éste artículo te lo explicaré. Para entender completamente la regla anterior, vamos a dividir cada línea y hablar de lo que hace.

Grid Track

Un término que escucharás mucho sobre Grid es "Grid Track". Un Track es un carril de la Grid, es decir, una columna o fila dentro de la cuadrícula definida. Aquí es donde Grid difiere de Flexbox.

Mientras que Flexbox puede tratar columnas o filas, es decir es unidimensional, Grid es bidimendional, es decir podemos definir columnas Y filas al mismo tiempo.

La propiedad grid-template-columns describe el tamaño de los carriles de columnas. Esto incluye cosas como: cuántas columnas necesito, qué tan anchas deben ser y si quiero nombrarlas. Si quisieramos un diseño sencillo de tres columnas, podríamos utilizar algo como lo siguiente:

.grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
}

De igual manera podemos utilizar grid-template-rows para definir los carriles de filas, toma los mismos valores, pero se aplica a la altura en lugar del ancho, y aunque no lo estamos utilizando en este ejemplo, es otra propiedad muy útil que debes tener en cuenta.

Repetir

La función de repetición permite que la regla dentro del paréntesis se aplique a todas los carriles (columnas y filas) de nuestra cuadrícula. Esto es genial si quieres que todas tus columnas sigan las mismas reglas, pero si necesitas columnas desiguales también puedes establecerlas explícitamente como en el ejemplo anterior. Aquí un ejemplo de la función de repetición:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 33%);
}

En nuestro ejemplo original, estamos utilizando la función repeat() para ejecutar el mismo código más de una vez:

repeat( auto-fit, minmax(200px, 1fr) );

Contiene mucho más que la sintaxis estándar, así que vamos a sumergirnos en esta regla y hablar de las propiedades: auto-fit, minmax y la unidad fr para tener un poco más de claridad sobre lo que sucede.

Ajuste Automático

La palabra clave auto-fit, significa: "ajusta tantas columnas o filas como puedas en este carril". Esta es una buena manera de crear diseños flexibles si tienes una cantidad variable de columnas en una fila. Estas columnas también se reacomodan en función del ancho de la pantalla, por lo que si bien puede tener 5 columnas en una pantalla ancha, sólo puede tener 2 en una pantalla estrecha, dependiendo del espacio disponible. La colocación automática de columnas es una característica poderosa en Grid CSS, pero lo más genial, es, que esto se hace sin ninguna media queries.

Si desean crear un diseño sencillo mediante el ajuste automático, pueden utilizar algo como esto:

.grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, 200px );
}

El ejemplo anterior produciría una serie de columnas de 200px de ancho, empujando a la fila siguiente cuando no encajan correctamente.

Auto-fit también tiene una palabra clave similar llamada "auto-fill". Las dos funcionan de manera similar, pero como no está incluido en nuestro código original, puedes leer más acerca del relleno automático en MDN.

Auto-fit y auto-fill son palabras clave que se llevan muy bien con la función minmax(), que es realmente la que hace la magia en la creación de una estructura de columnas flexibles.

Mínimo y Máximo

La función minmax() define un límite inferior y superior para el tamaño de la cuadrícula. En nuestro caso estamos diciendo: "Las columnas de este carril no pueden ser menores de 200px y pueden ser tan grandes como una fracción" (una fracción es el resto del espacio sobrante). De la unidad de fracción hablaré más adelante.

grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );

Cuando combinamos esto con el ajuste automático correctamente, veremos que las columnas llenan una fila en función del espacio disponible, pero también se rompen a la siguiente fila cuando no hay espacio. Esto produce una retícula responsiva sin la necesidad de utilizar media queries, ¡¡¡Increíble!!! ¿No? .

Unidad Fracción (fr)

La unidad de "fracción" está destinada a ocupar el resto del espacio en un carril (fila o columna). Si deseas establecer una columna de 200px, y luego otra de 300px y una más que rellene el resto del contenedor, el tercer elemento se definiría con la unidad de fracción:

.grid {
    display: grid;
    grid-template-columns: 200px 300px 1fr;
}

En nuestro caso, lo estamos usando para indicar al navegador el ancho máximo de una columna, pero también se puede usar para crear diseños completamente flexibles, y usar unidades relativas como los ems, rems y porcentajes. Dicho esto es importante decir que la unidad de fracción también tiene la ventaja de funcionar muy bien en combinación con las otras unidades (px,%, em, rems, etc) disponibles.

Grid Gap

Probablemente la parte más directa y fácil de entender de esta regla, grid-gap, es la cantidad de espacio entre cada elemento de la cuadrícula. En nuestro ejemplo, se establecen 10px, por lo que cuando los anchos de celda se calculan en el navegador, éste siempre dejará una diferencia de 10px entre cada celda.

A continuación puedes ver el código resultante de este artículo en mi CodePen:

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 a nuestro boletín

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