The Logic: Parent & Child Relationship
A Grid works based on a hierarchical relationship:
Grid (Parent Element): This component serves as the base for your horizontal division and should be placed inside a container element.
Grid Items (Child Elements): Within a Grid, you create individual columns using Grid Items. You can place as many Grid Items as you like within a Grid, though at least two are required to form a split layout.
💡 Expert Tip: Grids can be nested. This means you can insert a new Grid into an existing Grid Item to create highly detailed and multi-layered layout structures.
Settings and Alignment
In the Component Settings, you have full control over the appearance of your Grid:
Grid Settings (Parent)
Horizontal & Vertical Alignment: Determine how the content within the Grid should be aligned.
Direction of Grid Items: Define the flow direction of your columns.
Gap between Items: Set the spacing between individual columns (e.g., "Large Gap") to give your design more breathing room.
Spacing: Use the spacing options for fine-tuning margins and padding.
Grid Item Settings (Child)
Item Size: Each Grid Item can have its own independent size. You can choose between a specific column width, an automatic adjustment (Auto), or an alignment based on the content (Content).
Additional Flexibility: For even more precise spacing, we recommend using a Container component inside a Grid Item.
Responsive Design and Wrap Behavior
JUNE provides both cross-device and device-specific settings, which is crucial for mobile optimization:
Automatic Wrap: By default, Grids wrap automatically on smaller screens.
Device-Specific Width: In the Mobile view of the editor, you can set a specific width for your Grid Items. This allows you to precisely control how and when the columns wrap.
Live Preview: Use the various viewport icons (Desktop, Tablet, Mobile) in the top bar to check the wrapping behavior in real-time.
Grid vs. Masonry: Which one to use?
While the classic Grid provides structure for diverse content (images, text, forms) and maximum control, the Masonry component is designed for specific use cases.
Feature | Classic Grid | Masonry |
Primary Purpose | Diverse content & structure
| Dynamic image arrangement
|
Row Alignment | The second row starts uniformly below the tallest element of the first row. | Images are lined up with uniform gaps, regardless of height. |
Control | High control over spacing and wrapping. | Focus on aesthetics for varying image dimensions.
|
Comparison image: Start of the 2nd row in a Grid vs. Masonry Example
-> visual difference in row formation
Use Cases
Grids are extremely versatile and can be used in almost all structural components within JUNE, including:
Section & Layout Components
Tab Containers / Tab Items
Collapsibles & Intent Modals