CSS Grid Level 3, also known as 'Masonry' layout, is an extension of CSS Grid proposed by Mozilla. It allows for content to pack together in a pattern similar to a brick or stone wall, creating a masonry or waterfall layout. This layout solves the problem of accommodating content with different aspect ratios and enables lazy-loading of additional content without disrupting the existing layout. The debate revolves around whether masonry should be a separate display type or integrated into CSS Grid.
Table of contents
What is masonry layout?Inventing masonryFour demosCreating a classic masonry / waterfall layoutLeveraging Grid’s full power to define columnsLeveraging Grid’s ability to let content span columnsColumnar vs. Modular GridsUsing subgrid and explicit placementThe DebateWhat is a grid?We want to hear from youP.S. About the name…Sort: