Entender justify-self, justify-items y justify-content en la cuadrícula CSS

su confusión con respecto a las similitudes y diferencias entre estos tres Las propiedades son comprensibles, ya que la documentación a menudo se centra en la caja flexible en lugar de la red. Para aclarar:

1. Relación entre las propiedades Flex-Box y la cuadrícula

Las propiedades Justify-Self y Justify-Items no se implementan en Flex-Box. Esta distinción proviene de la naturaleza unidimensional de Flex-Box, lo que hace que justificar un solo elemento sea imposible. Por lo tanto, Flex-Box se basa en la propiedad Justify-Content para su alineación a lo largo del eje principal.

2. Roles de Justify-Self, Justify-Items y Justify-Content

• justify-Content : alinea toda la cuadrícula a lo largo del eje de fila. Esta propiedad controla el espacio entre los elementos de la cuadrícula en la dirección horizontal.
• justify-items : alinea el contenido dentro de los elementos de la cuadrícula individual a lo largo del eje de fila. Afecta la alineación del contenido dentro de las celdas de la cuadrícula.
• justify-self : alinea el elemento de cuadrícula actual dentro de su celda de la cuadrícula principal a lo largo del eje de fila. Esta propiedad ajusta individualmente la alineación de elementos de cuadrícula específicos.

3. Diferencias clave

La siguiente ayuda visual proporciona una clara demostración de las distinciones entre estas propiedades:

[imagen del diseño de la cuadrícula con diferentes alineaciones de contenido, elementos de cuadrícula y la cuadrícula en sí mismo]

recursos adicionales

para obtener más información, consulte lo siguiente Artículos:

• https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout/box_alignment_in_css_gr id_layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-laayout/