Beyond the List: Building Magazine-Style Layouts with Grids

The days of the "single column list" are over. With the new Grid and Card components, you can build layouts that rival professional portfolios.

Understanding the Grid

The Grid component is your layout engine. You can now toggle between 1, 2, 3, or 4 columns.

• 2-Column: Perfect for "My Gear" or "Services."
• 3-Column: Ideal for image galleries or team rosters.
• Auto-Stacking: Don't worry about mobile; our grid engine automatically collapses to a single column on small screens.

Supercharged Cards

The Card component is no longer just a container. It's an interactive surface.

• Hover Effects: Choose from Lift, Glow, or Scale. When a user hovers over a project, make it physically lift up or emit a subtle colored glow (using your theme's accent color).
• Image Positioning: You aren't stuck with "image on top." You can now set the image to the Left (for a list view style) or as a Background (for a poster style with text overlay).

Stacking Context

Use the Stack component to group related grids. For example, create a "Design Work" stack with a vertical gap of xl, containing a heading and a 2-column grid. This provides the "breathing room" that makes high-end design feel expensive.