Comprender la distinción entre "alinear elementos" y "alinear contenido" en Diseño de cuadrícula

El módulo Diseño de cuadrícula presenta dos conjuntos de propiedades, "justificar/alinear-elementos" y "justificar/alinear-contenido", que desempeñan funciones distintas en la alineación de los elementos de la cuadrícula y la cuadrícula misma dentro de una cuadrícula contenedor.

Aclaración de terminología de cuadrícula

• Contenedor de cuadrícula: El contenedor principal que define el espacio general de la cuadrícula.
• Cuadrícula: Una cuadrícula estructurada de líneas que divide el contenedor de la cuadrícula en áreas de la cuadrícula.
• Cuadrícula Elementos: Cuadros que contienen contenido entrante dentro de las áreas de la cuadrícula.

Alinear elementos frente a Alinear contenido

El "alinear- items" y las propiedades "align-content", como sugieren sus nombres, alinean los elementos de la cuadrícula y la cuadrícula, respectivamente. Específicamente:

• justify-content y align-content alinean las pistas de la cuadrícula dentro del cuadro de contenido del contenedor de la cuadrícula.
• justify-self y justify-items alinean los elementos de la cuadrícula en la dimensión en línea (horizontal por predeterminado).
• align-self y align-items alinean los elementos de la cuadrícula en la dimensión del bloque (vertical de forma predeterminada).

Abordar la afirmación del autor

La afirmación del autor de que las propiedades "-content" existen porque "a veces el tamaño total de su cuadrícula puede ser menor que el tamaño de su contenedor de cuadrícula" resalta lo siguiente:

• Cuando la cuadrícula es más pequeña que el contenedor de cuadrícula, hay espacio libre disponible.
• El "contenido justificado" y Las propiedades de "alinear contenido" pueden utilizar este espacio para alinear la cuadrícula centralmente o de otro modo dentro del contenedor.
• Por el contrario, si el tamaño de la cuadrícula es igual al tamaño del contenedor, no hay espacio libre y estas propiedades de alineación tienen No efecto.

Ilustraciones para mayor claridad

[Imagen de una ilustración del W3C que muestra una cuadrícula más pequeña que su contenedor, con "justify-content" y "align- content" alineando la cuadrícula dentro del contenedor.]

Extracto de la especificación

Para mayor claridad, extractos relevantes de CSS Grid Se proporcionan especificaciones de diseño:

• "Los elementos de la cuadrícula se pueden alinear en la dimensión en línea usando la propiedad justify-self en el elemento de la cuadrícula o la propiedad justify-items en el contenedor de la cuadrícula".
• "Los elementos de la cuadrícula también se pueden alinear en la dimensión del bloque usando la propiedad align-self en el elemento de la cuadrícula o la propiedad align-items en el contenedor de la cuadrícula".
• "Si la cuadrícula Los bordes exteriores no se corresponden con los bordes del contenido del contenedor de la cuadrícula, las pistas de la cuadrícula están alineadas dentro del cuadro de contenido de acuerdo con las propiedades justificar contenido y alinear contenido en el contenedor de la cuadrícula."