Layout

The Elements layout system provides a declarative approach to creating layouts using CSS flexbox and grid. This system enables complex, adaptive layouts with minimal markup and custom CSS.

Installation

The layout system is part of the core Elements styles package:

Layout System Overview

The nve-layout attribute provides a unified API for three layout modes:

• Horizontal Layout (row): Flexbox-based horizontal arrangements
• Vertical Layout (column): Flexbox-based vertical stacking
• Grid Layout (grid): CSS Grid-based multi-dimensional layouts

Each layout mode supports spacing, alignment, and responsive behavior through a consistent syntax.

Apply Layout to Native HTML Elements

Apply the nve-layout attribute to native HTML elements rather than Elements components. Use semantic HTML elements like <section>, <main>, <nav>, <aside>, or generic containers like <div> as your layout containers. Similarly, form components have built-in layout capabilities.

For more details, see the documentation on the internal-host pattern and slots which the library uses in development, as well as MDN docs on the Shadow DOM.

When to Use Each Layout Type

Use Horizontal Layout (row) when:

• Arranging items side-by-side (navigation bars, button groups, toolbars)
• Creating inline forms or control groups
• Building card layouts that flow horizontally
• Aligning items along a single horizontal axis

Use Vertical Layout (column) when:

• Stacking content vertically (forms, card content, sidebars)
• Creating centered hero sections or landing pages
• Building mobile-first layouts that stack naturally
• Organizing content in a top-to-bottom flow

Use Grid Layout (grid) when:

• Creating multi-column layouts (dashboards, galleries)
• Building complex page structures with precise control
• Implementing magazine-style layouts
• Needing both row and column control simultaneously

Core Features

The layout system provides consistent features across all layout types:

Gap Spacing

Control the space between elements using t-shirt sizing values that maintain visual consistency:

• gap:none
• gap:xxxs
• gap:xxs
• gap:xs
• gap:sm
• gap:md
• gap:lg
• gap:xl
• gap:xxl
• gap:xxxl

Gap xxxs

Gap xxs

Gap xs

Gap sm

Gap md

Gap lg

Gap xl

Gap xxl

Gap xxxl

No Gap

Padding

Add internal spacing to containers using the same t-shirt sizing system:

• pad:none
• pad:xxxs
• pad:xxs
• pad:xs
• pad:sm
• pad:md
• pad:lg
• pad:xl
• pad:xxl
• pad:xxxl

By default padding applies to all 4 sides of container, to specify padding on a single side use:

• pad-top:md
• pad-right:md
• pad-bottom:md
• pad-left:md

Or use the short hand to just pad the x and y axes.

• pad-x:md
• pad-y:md

Padding Top

Padding Left

Padding Right

Padding Bottom

Padding X

Padding Y

Padding xxxs

Padding xxs

Padding xs

Padding sm

Padding md

Padding lg

Padding xl

Padding xxl

Padding xxxl

No Padding

Full width/height on container

For convenience you can set a full option to give the container 100% width & height. This is often useful for giving the root element of a page full height.

Layout Composition

You can compose layout attributes to create sophisticated designs:

Best Practices

1. Apply to native HTML: Use nve-layout on HTML elements, not Elements components
2. Start with semantic HTML: Use appropriate elements (<nav>, <main>, <aside>) with layout attributes
3. Mobile-first approach: Design for narrow screens first, then enhance for larger displays
4. Consistent spacing: Use the t-shirt sizing system rather than custom values
5. Combine thoughtfully: Layer layout attributes to achieve complex designs
6. Test responsively: Ensure layouts work across all device sizes

Next Steps

• Explore Horizontal Layouts for side-by-side arrangements
• Learn about Vertical Layouts for stacked content
• Understand Grid Layouts for multi-dimensional designs