Multiple Image Layout Demo

This page demonstrates the multiple image layout feature that automatically arranges images in columns based on the number of images in a group. The layout is responsive and adapts to different screen sizes.

Usage Rules

Images can be separated by line breaks, but not by empty lines. The CSS will automatically adjust the column count based on the number of <img> tags within a <p> element.

For example:

![](image1.jpg)
![](image2.jpg)
![](image3.jpg)

Demo Examples

Two Images

Three Images

Four Images

Mixed Landscape and Portrait Images

This layout handles mixed orientations gracefully, though column heights may vary:

Features

• Automatic Column Distribution: Images are automatically arranged in 2-4 columns based on count
• Responsive Design: Layout adapts to mobile devices with single column on small screens
• Mixed Orientations: Handles both landscape and portrait images in the same group
• Consistent Spacing: Maintains uniform gaps between images and columns
• Break Prevention: Prevents images from breaking across columns