Curso de CSS / fundamentos de Grid: pistas, líneas y colocación

CSS Grid define filas y columnas para un diseño bidimensional y coloca elementos hijos directos en esa cuadrícula. Las líneas de la cuadrícula delimitan pistas y celdas; un ítem puede abarcar múltiples pistas sin cambiar el orden del documento.

Identifica contenedores, líneas, pistas, celdas y áreas

Un contenedor de cuadrícula es un elemento padre que aplica display: grid, y los ítems de la cuadrícula son hijos directos de ese padre. Los hijos dentro del primer hijo no son ítems independientes en la cuadrícula externa. Dibujar una cuadrícula en CSS no crea nuevos elementos HTML; solo cambia la forma en que calculamos dónde caerá cada hijo en la cuadrícula.

Los números de línea y los números de columna son diferentes. Si cuentas hasta el borde exterior de las dos columnas, las líneas numeradas son 1·2·3. Si colocas un elemento en las líneas 1 a 3, ocupará dos columnas. gap es el espacio entre las pistas y se calcula por separado del padding o border del elemento. Es fácil ver los números de línea y las áreas reales activando la visualización de la cuadrícula en Elements en Developer Tools. Los conceptos básicos de la cuadrícula de MDN resumen términos y operaciones básicas.

Define las columnas con px, porcentajes y fr

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

Este código parcial se puede comparar reemplazando las declaraciones de columnas dentro de la regla .grid del ejemplo completo. La primera columna usa 160px, y la segunda columna utiliza el espacio restante. fr es una fracción, que divide el espacio restante según una proporción después de considerar otras pistas y espacios. Fijar la primera columna sin tener en cuenta el contenido puede hacer que el cuerpo sea demasiado estrecho para pantallas estrechas, por lo que se debe juzgar esto según el contenido real.

En un contenedor con un ancho de 640px, si la brecha es de 16px y las dos columnas son 1fr·2fr, el espacio a distribuir es de 624px. Si no hay restricción de tamaño mínimo, la primera columna es de 208px y la segunda columna de 416px. El ejemplo completo usa minmax(0, 1fr) minmax(0, 2fr) para asegurar que el ancho mínimo de la pista no esté fijado de manera significativa debido a su contenido.

Si utilizas 50% 50% y gap: 16px juntos, el ancho del contenedor puede llenarse solo con las columnas y luego el gap puede añadirse causando desbordamiento. Para repartir el espacio disponible en columnas flexibles, fr facilita el cálculo. Esto no significa que debas hacer que todas las columnas tengan la misma proporción. Tu lista puede necesitar tener una pequeña columna para el nombre y una columna grande para la descripción, y también puedes querer usar una combinación de columnas fijas y flexibles.

Compara filas explícitas e implícitas

grid-template-rows: 80px define explícitamente una primera fila. Si no hay suficientes filas para colocar los elementos siguientes, se crea una fila implícita, y su tamaño se puede ajustar con grid-auto-rows. Crear dos columnas no te limita a dos filas.

Usa una fila fija cuando exista un requisito claro de tamaño, pero permite que las tarjetas explicativas acomoden líneas adicionales provenientes de la traducción o del texto ampliado. minmax(100px, auto) establece un mínimo y permite crecer; no requiere que todas las filas tengan alturas idénticas. Cada fila depende de su contenido y de las condiciones de diseño. Para más detalles, consulta la descripción de grid-auto-rows en MDN sobre el tamaño de las filas implícitas .

Coloca elementos con líneas y spans

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1 significa desde la primera línea hasta la última línea de la cuadrícula explícita. Es adecuado para títulos o áreas destacadas que ocupan todo el ancho de la cuadrícula explícita, ya sea de dos columnas o de una columna. Los números de línea negativos se cuentan en relación con el final de la cuadrícula explícita y no representan el final de todas las pistas generadas automáticamente. Cómo ajustar el número y el tamaño mínimo de las columnas repetidas se compara en CSS Grid: repeat, auto-fit, auto-fill y áreas.

span 2 significa ocupar dos pistas, y si no especificas una línea de inicio exacta, la colocación automática determinará la posición. En móviles, si solo tienes una columna y sigues usando span 2, podrías crear una columna extra no deseada. Si deseas mantener el ancho completo, usa 1 / -1 o vuelve a especificar el valor de span en móviles. Cuando minimizas las especificaciones de colocación, cualquier elemento restante se ubicará por defecto en celdas vacías en el orden del HTML.

Ejecuta el ejemplo completo de Grid

Guarda el código siguiente como grid-basics.html y ábrelo. A y B se colocan en la primera fila fija, C se coloca en una fila implícita y abarca todas las columnas, y D y E se colocan en la siguiente fila automática. Con una anchura de ventana de 480px o menos, las columnas se convierten en una y C sigue ocupando todo el ancho.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

1. En pantallas anchas, asegúrate de que el ancho de .grid sea de 640px y activa Mostrar cuadrícula en las Herramientas de desarrollo. Las columnas son de 208px·416px, y el espacio entre ellas es de 16px. Si cambias la proporción de columnas a 1fr·1fr, cada una se vuelve de 312px. Después de la comparación, restaura la proporción original 1:2 con minmax(0, 1fr) minmax(0, 2fr).
2. La primera fila tiene una altura de 80px. Si agregas varias líneas de texto dentro de A, la altura de la fila en sí permanecerá igual y el contenido puede desbordarse. Si devuelves el texto a su estado original y cambias grid-template-rows a minmax(80px, auto), puede crecer dependiendo del contenido.
3. Aumenta suficientemente el contenido de C. grid-auto-rows es minmax(100px, auto) para que las filas puedan ser más grandes que 100px. Cambia solo grid-auto-rows a 100px y observa la diferencia en filas fijas, luego devuélvelo a su valor original.
4. Si solo eliminas la declaración de grid-column de C, C se colocará en una celda y la posición de los elementos detrás de él también cambiará. Restaura 1 / -1. Reduce la anchura de la ventana a 480px o menos para ver si la especificación de ancho general se mantiene en 1 columna.

Maneja contenido largo en pantallas estrechas

La pista de 1fr de la cuadrícula puede expandirse debido a cadenas largas a causa de su tamaño mínimo automático por defecto. minmax(0, 1fr) es un método para establecer el tamaño mínimo de la pista a 0, y los saltos de línea reales en la cadena requieren reglas separadas. min-width: 0 también se aplica al propio elemento según la situación. Guarda el siguiente código como grid-long-text.html. Si los elementos se desbordan más allá de la columna, revisa overflow, saltos de texto y puntos suspensivos con CSS para reglas de salto de línea en cadenas largas.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

1. Cambia solo overflow-wrap a normal para confirmar que las letras pueden desbordarse incluso si se mantiene el ancho de la pista.
2. Si reemplazas ambas columnas con 1fr 1fr, puedes ver cómo el tamaño mínimo de una cadena larga afecta la distribución de columnas. Después de comparar, restaura las dos columnas minmax(0, 1fr) y el valor anywhere de overflow-wrap.

Elige un punto de cambio del diseño adaptable basado en el ancho de lectura real del contenido en lugar del nombre del dispositivo. Los 480px en este ejemplo son una elección de aprendizaje y no un estándar para todas las cuadrículas. Puedes reducir la pantalla y acercar el texto para ver líneas fijas, cadenas largas y columnas adicionales creadas por spans para ayudarte a aislar la causa del desbordamiento.