Container

Overview

The Container element centers content horizontally and constrains it to a maximum width. It renders as a <div> with container mx-auto classes, creating a centered content area within full-width Sections.

Containers work with the container widths defined in Settings → Global Styles. At different breakpoints, the container adapts its max-width to match the configured values (sm, md, lg, xl, 2xl).

Key Features

• Auto-centering: The mx-auto class centers the container horizontally within its parent
• Responsive widths: Max-width adjusts based on screen size using Global Styles container settings
• Content boundary: Prevents content from stretching too wide on large screens for optimal readability
• Nesting support: Can contain any other elements including Grid Columns, Flex Columns, and Divs

Settings

Configure the Container element using these settings in the Inspector panel:

Examples

Standard Centered Container

The basic container centers content and applies responsive max-widths:

<div class="container mx-auto">
  <h2>Centered Content</h2>
  <p>This content is centered and constrained to the container max-width.</p>
</div>

Container with Horizontal Padding

Add horizontal padding to prevent content from touching screen edges on mobile:

<div class="container mx-auto px-4 md:px-6 lg:px-8">
  <h2>Padded Content</h2>
  <p>Content has breathing room from the container edges.</p>
</div>

Nested Section > Container Pattern

The standard page structure pattern with full-width Section and centered Container:

<section class="py-12 bg-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold mb-6">Features</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white p-6 rounded-lg shadow">Feature 1</div>
      <div class="bg-white p-6 rounded-lg shadow">Feature 2</div>
      <div class="bg-white p-6 rounded-lg shadow">Feature 3</div>
    </div>
  </div>
</section>

Narrow Container for Text Content

Override max-width for better readability on text-heavy sections:

<div class="container mx-auto max-w-3xl px-4">
  <article class="prose">
    <h1>Blog Post Title</h1>
    <p>Long-form content benefits from a narrower container width
       for optimal line length and readability.</p>
  </article>
</div>

Best Practices

• Use inside Sections: Place Containers inside Section elements to get full-width backgrounds with centered content
• Add horizontal padding: Apply px-4 or similar on mobile to prevent content from touching screen edges
• Responsive padding: Use responsive utilities like px-4 md:px-6 lg:px-8 for appropriate spacing at each breakpoint
• Override for text: For blog posts or articles, consider using max-w-3xl or max-w-4xl for better readability

Related Elements

• Section – Full-width page section for grouping content
• Grid Columns – CSS Grid layout for responsive columns
• Flex Columns – Flexbox layout for flexible arrangements