Skip to main content

Container Layout System

Container utilities provide a responsive, centered wrapper for your content with automatic padding and width constraints.

Overview​

Containers are the most basic layout element in NuvoUI and are required when using the grid system. They're used to contain, pad, and center your content within a given viewport.

  • Standard containers have responsive max-widths for different viewport sizes
  • Container variations support different display properties (block, flex, grid)
  • Fluid containers maintain full width across all viewport sizes
  • Container utilities allow customization of padding

Basic Usage​

Add the .container class to create a responsive, centered container:

Container Types​

NuvoUI provides several container variations for different needs:

ClassDescriptionProperties
.container .flexFlex containerSame as standard but with display: flex
.container .gridGrid containerSame as standard but with display: grid
.containerFull-width container100% width at all breakpoints with padding

Container Examples​

Container with Flex Layout​

Combine container with flex utilities:

Responsive Behavior​

Containers automatically adjust their max-width based on the viewport size:

BreakpointContainer Max-Width
Default100%
sm (640px)540px
md (768px)668px
lg (1024px)924px
xl (1280px)1180px
2xl (1536px)1436px

This container adjusts its width based on the viewport size.

Try resizing your browser to see the effect.

Container Width

Nesting Containers​

While containers can be nested, it's generally not recommended as it can lead to unexpected padding issues:

Common Usage Patterns​

Centered Page Layout​

Use a container to center your content on the page:

Container with Flex Layout​

Combine container with flex utilities:

Container with Grid Layout​

Combine container with grid utilities:

Available Mixins​

For custom implementations, you can use these Sass mixins:

Custom Container Example​

Creating a custom container with Sass:

Best Practices​

Do​

  • Use containers to create consistent page layouts
  • Choose the right container type for your layout needs
  • Combine containers with flex or grid for complex layouts
  • Use container for full-width sections
  • Take advantage of the automatic responsive behavior

Avoid​

  • Nesting containers unnecessarily
  • Adding horizontal padding or margins to direct children of containers
  • Setting explicit width on containers (use max-width if needed)
  • Overriding the responsive behavior without good reason
  • Using containers when a simpler solution would work