Native CSS Masonry Layout In CSS Grid

Rachel Andrew highlights the upcoming native CSS masonry layout capability within CSS Grid. While masonry layouts are currently achievable, the challenge lies in simultaneously managing vertical staggering and maintaining left-to-right source order. This new feature elegantly addresses this issue, offering a cleaner, less hacky solution.

Firefox Nightly users can experiment with a partial implementation by enabling the layout.css.grid-template-masonry-value.enabled flag.

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

The grid-template-rows: masonry; syntax is intuitive, clearly indicating that row heights are automatically managed. The implication is that subgrid inheritance doesn't apply to rows in this context, which is logical.

The above is the detailed content of Native CSS Masonry Layout In CSS Grid. For more information, please follow other related articles on the PHP Chinese website!