Diseño de mampostería CSS nativo en CSS Grid | Programar Plus

Rachel Andrew presenta el hecho de que el diseño de mampostería será una cosa en CSS nativo a través del diseño de cuadrícula de CSS. Lo que pasa con la mampostería es que ya podemos hacerlo en su mayor parte, pero solo hay una cosa que lo dificulta: hacer el escalonamiento vertical y tener un orden de origen de izquierda a derecha. Así que eso es lo que resolverá esta nueva habilidad además de ser menos hacker en general.

Ya puede 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 el grid-template-rows: masonry; sintaxis porque creo que comunica claramente: “No estás configurando estas filas. De hecho, ya ni siquiera hay filas, nos encargaremos de eso “. Lo que supongo significa que no hay filas para heredar en la subcuadrícula, lo que también tiene sentido.

(Visited 8 times, 1 visits today)