Cómo hacer que su HTML responda agregando una sola línea de CSS

Foto por TJ Holowaychuk

En este artículo, le enseñaré cómo usar CSS Grid para crear una cuadrícula de imagen súper genial que varía la cantidad de columnas con el ancho de la pantalla.

Y la parte más hermosa: la capacidad de respuesta se agregará con una sola línea de CSS.

Esto significa que no tenemos que saturar el HTML con nombres de clase feos (es decir, col-sm-4, col-md-8) o crear consultas de medios para cada tamaño de pantalla.

También he creado un curso gratuito de CSS Grid. Haga clic aquí para obtener acceso completo.
Haz clic en la imagen para llegar al curso.

¡Ahora saltemos a eso!

La puesta en marcha

Para este artículo, continuaremos con la cuadrícula que utilizamos en mi primer artículo de CSS Grid. Luego agregaremos las imágenes al final del artículo. Así es como se ve nuestra grilla inicial:

Aquí está el HTML:

  
1
  
2
  
3
  
4
  
5
  
6

Y el CSS:

.envase {
    pantalla: cuadrícula;
    columnas-plantilla-cuadrícula: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
Nota: el ejemplo también tiene un poco de estilo básico, que no voy a mencionar aquí, ya que no tiene nada que ver con CSS Grid.

Si este código lo confunde, le recomiendo que lea mi artículo Aprender CSS Grid en 5 minutos, donde le explico los conceptos básicos del módulo de diseño.

Comencemos haciendo que las columnas respondan.

Capacidad de respuesta básica con la unidad de fracción

CSS Grid trae consigo un valor completamente nuevo llamado unidad de fracción. La unidad de fracción se escribe como fr, y le permite dividir el contenedor en tantas fracciones como desee.

Cambiemos cada una de las columnas para que tengan una fracción de ancho.

.envase {
    pantalla: cuadrícula;
    grilla-plantilla-columnas: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

Lo que sucede aquí es que la cuadrícula divide todo el ancho en tres fracciones y cada una de las columnas ocupa una unidad cada una. Aquí está el resultado:

Si cambiamos el valor de las columnas de plantilla de cuadrícula a 1fr 2fr 1fr, la segunda columna ahora tendrá el doble de ancho que las otras dos columnas. El ancho total es ahora de cuatro unidades de fracción, y la segunda ocupa dos de ellas, mientras que las otras ocupan una cada una. Así es como se ve:

En otras palabras, el valor de la unidad de fracción hace que sea muy fácil cambiar el ancho de las columnas.

Capacidad de respuesta avanzada

Sin embargo, el ejemplo anterior no nos da la capacidad de respuesta que queremos, ya que esta cuadrícula siempre tendrá tres columnas de ancho. Queremos que nuestra cuadrícula varíe la cantidad de columnas con el ancho del contenedor. Para lograrlo, tendrás que aprender tres conceptos nuevos.

repetir()

Comenzaremos con la función repeat (). Esta es una forma más poderosa de especificar sus columnas y filas. Tomemos nuestra cuadrícula original y cámbiela al uso de repeat ():

.envase {
    pantalla: cuadrícula;
    cuadrícula-plantilla-columnas: repetir (3, 100px);
    grid-template-rows: repetir (2, 50px);
}

En otras palabras, repetir (3, 100px) es idéntico a 100px 100px 100px. El primer parámetro especificó cuántas columnas o filas desea, y el segundo especifica su ancho, por lo que esto nos dará exactamente el mismo diseño que comenzamos con:

ajuste automático

Luego está el ajuste automático. Omitamos tener una cantidad fija de columnas, y más bien reemplacemos 3 con ajuste automático.

.envase {
    pantalla: cuadrícula;
    rejilla: 5px;
    cuadrícula-plantilla-columnas: repetir (ajuste automático, 100 px);
    grid-template-rows: repetir (2, 100px);
}

Esto da como resultado el siguiente comportamiento:

La cuadrícula ahora varía la cantidad de columnas con el ancho del contenedor.

Simplemente trata de encajar tantas columnas de 100px de ancho en el contenedor como sea posible.

Sin embargo, si codificamos todas las columnas para que tengan exactamente 100 píxeles, nunca obtendremos la flexibilidad que deseamos, ya que rara vez se sumarán al ancho completo. Como puede ver en el gif de arriba, la cuadrícula a menudo deja espacios en blanco en el lado derecho.

mínimo máximo()

El ingrediente final que necesitamos para arreglar esto se llama minmax (). Simplemente reemplazaremos 100px con minmax (100px, 1fr). Aquí está el CSS final.

.envase {
    pantalla: cuadrícula;
    rejilla: 5px;
    cuadrícula-plantilla-columnas: repetición (auto-fit, minmax (100px, 1fr));
    grid-template-rows: repetir (2, 100px);
}
Tenga en cuenta que toda la capacidad de respuesta ocurre en una sola línea de CSS.

Esto da como resultado el siguiente comportamiento:

Y como puedes ver, eso funciona perfectamente. La función minmax () define un rango de tamaño mayor o igual que min y menor o igual que max.

Entonces las columnas ahora siempre tendrán al menos 100 px. Sin embargo, si hay más espacio disponible, la cuadrícula simplemente lo distribuirá equitativamente a cada una de las columnas, ya que las columnas se convierten en una unidad de fracción en lugar de 100 px.

Agregar las imágenes

Ahora el paso final es agregar las imágenes. Esto no tiene nada que ver con CSS Grid, pero aún veamos el código.

Comenzaremos agregando una etiqueta de imagen dentro de cada uno de los elementos de la cuadrícula.

Para que la imagen se ajuste al elemento, configuraremos que sea tan ancha y alta como el elemento en sí, y luego utilizaremos el ajuste de objeto: cubierta ;. Esto hará que la imagen cubra todo su contenedor, y el navegador la recortará si es necesario.

.container> div> img {
    ancho: 100%;
    altura: 100%;
    ajuste de objeto: cubierta;
}

Lo que termina así:

¡Y eso es! Ahora conoces uno de los conceptos más complejos en CSS Grid, así que date una palmadita en la espalda.

Soporte del navegador

Antes de terminar, también necesito mencionar el soporte del navegador. Al momento de escribir este artículo, el 77% del tráfico global del sitio web admite CSS Grid, y está aumentando.

Creo que 2018 será el año de CSS Grid. Obtendrá su avance y se convertirá en una habilidad imprescindible para los desarrolladores front-end. Al igual que lo que sucedió con CSS Flexbox en los últimos años.

Alternativamente, echa un vistazo a la vista previa del curso.

¡Gracias por leer! Mi nombre es Per, soy el cofundador de Scrimba, una herramienta para crear screencasts de codificación interactiva. Sígueme en Twitter e Instagram si quieres mantenerte en contacto.