Layout layoutmasonrycolumns

Masonry Layout

A CSS-based masonry layout for items of varying heights.

Component preview not available for: masonry-grid

Ensure the filename matches MasonryGrid.astro

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { MasonryLayout } from 'astro-component-kit';
---

<MasonryGrid>Content</MasonryGrid>
--- import { MasonryLayout } from 'astro-component-kit'; --- <MasonryGrid>Content</MasonryGrid>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/MasonryLayout.astro and paste the following code:

astro 
---
---
<div class="masonry"><slot /></div>
<style>
  .masonry { columns: 3 250px; column-gap: 1.5rem; }
  .masonry :global(> *) { break-inside: avoid; margin-bottom: 1.5rem; display: block; }
</style>
--- --- <div class="masonry"><slot /></div> <style> .masonry { columns: 3 250px; column-gap: 1.5rem; } .masonry :global(> *) { break-inside: avoid; margin-bottom: 1.5rem; display: block; } </style>

Quick Info

Category
Layout
Filename
MasonryLayout.astro
Dependencies
None — pure Astro + CSS
Tags
layoutmasonrycolumns