NV NVIDIA Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles CDN Custom Elements Eleventy Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About What’s New Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions DESIGN.md Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Codeblock Color Combobox Copy Button Datagrid Getting Started Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Bytes Format Datetime Format Number Format Relative Time Forms Getting Started Validation Actions Control Gauge Icon Icon Button Input Input Group Logo Markdown Markdown CSS Media Controller Pause Button Playback Rate Select Mute Button Seek Button Time Range Volume Range Full-screen Button Menu Month Monaco Input Diff Input Monaco Editor Diff Editor Problems Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

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.

Learn more about CSS layout fundamentals in the MDN CSS Layout guide and CSS-Tricks Flexbox guide.

Installation

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

The base layout system provides static layouts. For responsive behavior, the team plans extra modules for container and viewport breakpoint-based responsive design.

Layout System Overview

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

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

Apply Layout to Native HTML Elements

Elements components use Web Components with Shadow DOM encapsulation. Many components manage their own internal layout, for example: nve-card components have built-in layout for nve-card-header, nve-card-content, and nve-card-footer. Applying nve-layout directly to these components may not work as expected due to Shadow DOM boundaries.

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:xxs
  • gap:xs
  • gap:sm
  • gap:md
  • gap:lg
  • gap:xl
  • gap:xxl

Gap xxs

Gap xs

Gap sm

Gap md

Gap lg

Gap xl

Gap xxl

No Gap

Padding

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

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

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 xxs

Padding xs

Padding sm

Padding md

Padding lg

Padding xl

Padding xxl

No Padding
Gap affects space between child elements, while padding affects space inside the container. Use gap for consistent spacing between items and padding for breathing room around content.

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
While the layout system is highly optimized, avoid deeply nested layouts when simpler structures suffice. Modern browsers handle flexbox and grid efficiently, but excessive nesting can impact performance on lower-end devices.

Next Steps