Container

​

Props

​

Usage

​

Basic Container

import Container from '../components/Container.astro'

<Container size="lg">
  <h1>Welcome to my portfolio</h1>
  <p>This content is contained within a large container.</p>
</Container>

​

Small Container for Focused Content

import Container from '../components/Container.astro'

<Container size="sm">
  <article>
    <h2>Blog Post Title</h2>
    <p>This narrower container is perfect for readable text content.</p>
  </article>
</Container>

​

Extra Large Container

import Container from '../components/Container.astro'

<Container size="2xl">
  <div class="grid grid-cols-3 gap-4">
    <!-- Wide layout with multiple columns -->
  </div>
</Container>

​

Nested Content

import Container from '../components/Container.astro'
import Card from '../components/Card.astro'

<Container size="xl">
  <section>
    <h1>My Projects</h1>
    <div class="grid grid-cols-2 gap-4">
      <Card title="Project 1" />
      <Card title="Project 2" />
    </div>
  </section>
</Container>

​

Features

• Centered Layout: Automatically centers content horizontally with mx-auto
• Consistent Padding: Applies px-5 horizontal padding on all screen sizes
• Full Height: Uses h-full to occupy available vertical space
• Responsive Width: Maximum width adapts to the specified size breakpoint
• Flexible Content: Accepts any child content through the default slot

​

Styling

• w-full - Full width within parent
• h-full - Full height within parent
• mx-auto - Horizontal centering
• px-5 - Horizontal padding (1.25rem)
• max-w-screen-{size} - Maximum width based on size prop

​

When to Use

• Create a centered layout with consistent maximum width
• Ensure content doesn’t stretch too wide on large screens
• Maintain consistent horizontal padding across your pages
• Implement responsive layouts that adapt to different screen sizes

​

Component Source