CSS columns masonry grid — items flow top-to-bottom in columns like a Pinterest board or photo wall.

Unlike CSS Grid, items fill columns from top to bottom, so shorter items pack into gaps left by taller items. Use break-inside-avoid on children to prevent items from splitting across columns.

All layout attributes accept either a plain value (backward compatible) or a responsive map like %{base: 1, md: 3} for per-breakpoint control.

Examples

<%!-- 3-column masonry --%>
<.masonry_grid cols={3} gap={4}>
  <%= for card <- @cards do %>
    <div class="break-inside-avoid mb-4">
      <.card>{card.content}</.card>
    </div>
  <% end %>
</.masonry_grid>

<%!-- Responsive masonry: 1 col on mobile, 2 from md, 3 from lg --%>
<.masonry_grid cols={%{base: 1, md: 2, lg: 3}} gap={%{base: 2, md: 4}}>
  ...
</.masonry_grid>

<%!-- 2-column narrow layout --%>
<.masonry_grid cols={2} gap={3}>
  ...
</.masonry_grid>