Diseño de mampostería CSS nativo en CSS Grid

Rachel Andrew presenta el hecho de que el diseño de mampostería será una característica del CSS nativo a través del diseño de cuadrícula CSS. El problema con la mampostería es que ya podemos hacerlo en su mayor parte, pero solo hay una cosa que lo hace difícil: hacer el escalonamiento vertical y tener un orden de origen de izquierda a derecha. Eso es lo que resolverá esta nueva habilidad, además de ser menos complicada en general.

Ya puedes probar una implementación parcial en Firefox Nightly habilitando layout.css.grid-template-masonry-value.enabled.

.container {  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-template-rows: masonry;}

Me gusta la grid-template-rows: masonry;sintaxis porque creo que comunica claramente: “No estás configurando estas filas. De hecho, ya ni siquiera hay peleas, nosotros nos encargaremos de eso”. Lo que supongo significa que no hay filas que heredar en la subcuadrícula, lo cual también tiene sentido.