Aparte de las unidades básicas de CSS (px, em, rem, vh, vw...), estas son las unidades más usadas en CSS grid:
- fr: fracción del espacio disponible.
- %: relativo al contenedor.
- auto: tamaño según contenido.
- min-content / max-content: ajusta al contenido mínimo o máximo.
- span: permite a un elemento ocupar varias filas o columnas según el número indicado.
Ejemplo
En este ejemplo, mostramos una serie de columnas con cada una de estas unidades, donde podemos visualizar el comportamiento de cada una de ellas.
12345678
<div class="container">
<div class="child">1fr</div>
<div class="child">20%</div>
<div class="child">auto</div>
<div class="child">min-content</div>
<div class="child">max-content</div>
<div class="child span">span</div>
</div>
123456789101112131415
.container {
border: 1px solid #2b7de0;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 20% auto min-content max-content;
padding: 0.5rem;
}
.span {
grid-column: span 2;
}
.child {
padding: 1rem;
}