zone5 1.3.1 → 1.4.0

package/README.md

@@ -90,6 +90,64 @@ widths = [400, 800, 1200, 1600, 2400]
 <Zone5 images={[image1, image2]} />
 ```
 
+### Layout Modes
+
+Zone5 supports three layout modes:
+
+#### Wall Mode (Default)
+
+Fixed-height grid layout. Images are cropped to fill their containers.
+
+```svelte
+<Zone5 images={images} mode="wall" />
+```
+
+#### Waterfall Mode
+
+Column-based masonry layout. Images are distributed across columns and maintain their aspect ratios.
+
+```svelte
+<Zone5 images={images} mode="waterfall" />
+
+<!-- With custom column breakpoints -->
+<Zone5
+  images={images}
+  mode="waterfall"
+  columnBreakpoints={{ 640: 2, 1024: 4 }}
+/>
+```
+
+#### Justified Mode
+
+Row-based layout (like Flickr/Google Photos). Each row fills the full width while preserving aspect ratios. Panoramic images (aspect ratio > 3) automatically get their own row.
+
+```svelte
+<Zone5 images={images} mode="justified" />
+
+<!-- With custom row height and gap -->
+<Zone5
+  images={images}
+  mode="justified"
+  targetRowHeight={250}
+  gap={12}
+/>
+```
+
+### Setting Mode in Markdown
+
+Use the `zone5mode` frontmatter property:
+
+```markdown
+---
+zone5mode: justified
+---
+
+![Photo 1](./photo1.jpg?z5)
+![Photo 2](./photo2.jpg?z5)
+```
+
+Valid values: `wall`, `waterfall`, `justified`
+
 ### Using in Markdown/MDX
 
 Add the remark plugin to your `svelte.config.js`: