Propiedades: Grid Items
Propiedades de los elementos HIJOS (Grid Items)
| Propiedad / valores | Descripción |
|---|---|
| grid-column-start grid-column-end número | nombre | span número | span nombre | auto |
Determina la ubicación de un elemento de cuadrícula dentro de la cuadrícula haciendo referencia a líneas verticales de la cuadrícula. span numero indica el número de columnas que queremos que ocupe el elemento |
| grid-row-start grid-row-end número | nombre | span número | span nombre | auto |
Determina la ubicación de un elemento de cuadrícula dentro de la cuadrícula haciendo referencia a líneas horizontales de la cuadrícula. |
| grid-column grid-row start-line / end-line start-line / span valor |
Propiedad abreviada (Shorthand) de grid-column-start / grid-row-end y de grid-row-start / grid-row-end start-line es el número de fila donde comienza el elemento. Podemos mezclar valores numéricos de línea, con nombres de línea o con span valor |
| grid-area nombre | row-start/column-start/ row-end/column-end |
Da un nombre a un elemento para que pueda ser referenciado por una plantilla creada con la propiedad grid-template-areas. |
| justify-self start | end | center | stretch |
Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila (en oposición a alinear-self que se alinea a lo largo del eje de la columna). Este valor se aplica al contenido dentro de un único elemento hijo (grid item). |
| align-self start | end | center | stretch |
Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la columna (en contraposición a justificar-self que se alinea a lo largo del eje de la fila). Este valor se aplica al contenido dentro de un único elemento hijo (grid item). |