Layout layoutcontainergrid

Centered Container

A responsive container that limits content width and centers it.

Centered content within max-width constraint

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { CenteredContainer } from 'astro-component-kit';
---

<CenteredContainer maxWidth="1200px">Content</CenteredContainer>
--- import { CenteredContainer } from 'astro-component-kit'; --- <CenteredContainer maxWidth="1200px">Content</CenteredContainer>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/CenteredContainer.astro and paste the following code:

astro 
---
interface Props { maxWidth?: string; }
const { maxWidth = '1200px' } = Astro.props;
---
<div class="container" style={`--max-width: ${maxWidth}`}><slot /></div>
<style>
  .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
</style>
--- interface Props { maxWidth?: string; } const { maxWidth = '1200px' } = Astro.props; --- <div class="container" style={`--max-width: ${maxWidth}`}><slot /></div> <style> .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } </style>

Quick Info

Category
Layout
Filename
CenteredContainer.astro
Dependencies
None — pure Astro + CSS
Tags
layoutcontainergrid