Grid CSS tienen una serie de propiedades que se pueden utilizar para colocar los ítems dentro de la cuadrícula. Con ellas podemos distribuir los elementos de forma muy sencilla. Dichas propiedades son justify-items y align-items, que se usan en el módulo CSS flexbox.
| Propiedad | Valores | Descripción |
|---|---|---|
justify-items |
start | end | center | stretch | Distribuye los elementos en el eje horizontal. |
align-items |
start | end | center | stretch | Distribuye los elementos en el eje vertical. |
Estas propiedades se aplican sobre el elemento contenedor padre, pero afectan a los ítems hijos, por lo que actúan sobre la distribución de cada uno de los hijos. En el caso de que queramos que uno de los ítems hijos tengan una distribución diferente al resto, aplicamos la propiedad justify-self o align-self sobre el ítem hijo en cuestión, sobreescribiendo su distribución.
Estas propiedades funcionan exactamente igual que sus análogas justify-items o align-items, sólo que en lugar de indicarse en el elemento padre contenedor, se hace sobre un elemento hijo. Las propiedades sobre ítems hijos las veremos más adelante.
También podemos utilizar las propiedades justify-content o align-content para modificar la distribución de todo el contenido en su conjunto, y no sólo de los ítems por separado.
| Propiedad | Valores |
|---|---|
justify-content |
start | end | center | stretch | space-around | space-between | space-evenly |
align-content |
start | end | center | stretch | space-around | space-between | space-evenly |
De esta forma, podemos controlar prácticamente todos los aspectos de posicionamiento de la cuadrícula directamente desde los estilos CSS de su contenedor padre.
Atajo de posiciones Grid
Si vamos a crear estructuras grid donde necesitamos utilizar las cuatro propiedades anteriores, quizás sería mejor utilizar un atajo donde simplificaríamos mucho el código resultante. Es el caso de las siguientes propiedades.
| Propiedad | Valores | Descripción |
|---|---|---|
place-items |
[align-items] [justify-items] | Propiedad de atajo para *-items |
place-content |
[align-content] [justify-content] | Propiedad de atajo para *-content |
Con ellas conseguiremos que nuestro código sea menos verboso.