CSS Grid y el módulo Box Alignment 10.11.15
Traducción del artículo original de Rachel Andrew "CSS Grid and The Box Alignment Module" publicado en su web el 2 de Septiembre de 2015 en su web. El artículo lo complemento con un pen interactivo en el que puedes jugar con las distintas propiedades de este módulo.
Te recomiendo ver este artículo con Chrome Canary
CSS Grid y el módulo Box Alignment
Tener un buen control sobre la alineación y justificación es uno de los principales beneficios de los métodos de diseño modernos como Flexbox y CSS Grid Layout. Estas propiedades de alineación se especifican en el documento CSS Box Alignment Module Level 3. En este post voy a echar un vistazo rápido a cómo funcionan las siguientes propiedades de esta especificación con el Grid Layout.
- align-items
- justify-items
- align-self
- justify-self
Si quieres ver los siguientes ejemplos en acción tendrás que utilizar Chrome Canary. En todos los ejemplos enlazados utilizo una imagen de fondo que muestra el grid usado, por lo que puedes ver cómo se disponen los elementos.
Nota del Editor:Es recomendable que leas o vuelvas a leer el artículo "CSS Grid Layout: la revolución que esperas y que ya ha comenzado" para conocer el CSS Grid layout y su terminología propia.
Nota del Editor 2: Hoy, dos meses después de la publicación del post original, Chrome 46 también le da soporte.
El comportamiento predeterminado de los ítems del Grid
Los ítems del Grid se estirarán para llenar el área de la cuadrícula a menos que los márgenes se establecen en auto o que se utilicen las propiedades de alineación. Así que si has usado el Grid para crear un diseño de dos columnas y hay más contenido en la columna A que en la columna B, ambas columnas se extenderán hasta la misma altura, como se puede ver en este ejemplo.
See the Pen Grid by Example 12: No clearing required by rachelandrew (@rachelandrew) on CodePen.
Alineación de todos los ítems del Grid
Si deseas establecer valores de alineación en cada elemento hijo de un contenedor Grid se puede utilizar la propiedad align-items con el valor stretch, center, start o end. En el ejemplo enlazado las cuatro áreas izquierda cada cubren 3 grid tracks, pero he utilizado un valor center para align-items. Esto ha centrado el contenido dentro del área de la cuadrícula.
See the Pen Grid by Example 24: align-items by rachelandrew (@rachelandrew) on CodePen.
.wrapper {
display: grid;
align-items: center;
}
Justificar todos los ítems del Grid
La propiedad justify-items admite los valores stretch, center, start o end y en el siguiente ejemplo lo he declarado center
See the Pen Grid by Example 25: justify-items by rachelandrew (@rachelandrew) on CodePen.
.wrapper {
display: grid;
justify-items: center;
}
Alineación de sólo un ítem de Grid
Puedes establecer las propiedades de alineación de los ítems de Grid individualmente con la propiedad align-self. Esto actúa como align-items, pero se declara directamente a la regla del ítem del Grid al que se desea cambiar su alineación. En el siguiente ejemplo he puesto varios valores diferentes de align-self en las cajas.
See the Pen Grid by Example 26: align-self by rachelandrew (@rachelandrew) on CodePen.
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
align-self: end;
}
Justificación de sólo un ítem de Grid
También puedes usar la propiedad justify-self. Actúa como justify-items pero es aplicada diréctamente a las reglas del ítem de Grid. En los siguientes ejemplos he declarado diferentes valores para justify-self en mis cajas.
See the Pen Grid by Example 27: justify-self by rachelandrew (@rachelandrew) on CodePen.
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
justify-self: end;
}
Aquí tienes un demo en la web de Igalia en el que puedes jugar con estas propiedades (de nuevo, necesitas Chrome Canary).
Box alignment – no sólo para el Grid y Flexbox
Vale la pena echar un vistazo al documento "The Box Alignment Module". Estas propiedades no sólo se aplican al Grid Layout y Flexbox. En el futuro también se aplicarán al modelo tradicional de cajas, lo que significa que podremos alinear y justificar fácilmente nuestro contenido sin importa qué método de diseño del layout elijamos usar para crear un sitio. Al Grupo de Trabajo de CSS le encantaría tener tu opinión sobre este módulo, así que si te importa el centrado vertical y encuentras algún problema ¡házselo saber!
Créditos y reconocimiento de autoría
La totalidad del artículo hasta este punto, imágenes (excepto la inicial) y demostraciones incluidas, es obra de Rachel Andrew (aka @rachelandrew) publicado en su web rachelandrew.co.uk el 2 de Septiembre 2015 bajo el título "CSS Grid and The Box Alignment Module".
En su web Gric by Example puedes encontrar mucha más información, ejemplos y trabajos sobre el Grid Layout de CSS.
Todo junto en una demo
Para terminar y ajeno al artículo original de Rachel Andrew disfruta con esta demo de Abhishek Sachan en las que podrás jugar con las propiedades del módulo Css Box Alignment y sus diferentes valores y ver su efecto.
See the Pen Grid Alignment Properties Visualisation by Kseso (@Kseso) on CodePen.
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2015/11/css-box-alignment-grid-layout.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdjrmXyHUd88iSUtJBGVIO6YuwOmnXxth1kpgg9FSKd46XSrU5hXYkv683V9eDGUlcFYRkR44yV_-N0tqB0YxifD6_Yej8LRXBAenlXHqHtjrygVBNNyWTVdN-C7ab1uL5DfTtJh4FGGY/s800/Box-Alignment.jpg&description=Traducción del artículo original de <b>Rachel Andrew</b> "CSS Grid and The Box Alignment Module" publicado en su web el 2 de Septiembre de 2015 en su web. El artículo lo complemento con un pen interactivo en el que puedes jugar con las distintas propiedades de este módulo.<br/>
Te recomiendo ver este artículo con Chrome Canary){kind=link}
Muchas Gracias, fue de mucha ayuda
ResponderEliminar