Containers

Vanilla CSS Design System

Default Container

The default container class provides a responsive max-width and horizontal padding. It centers content and maintains readable line lengths on larger screens.

Default Container
Max-width: 1200px 
<div class="container">
	Your content here
</div>

Container Padding Variations

Containers can have different padding using utility classes.

Small Padding (p-2)
Large Padding (p-4) 
<div class="container p-2">
	Small padding container
</div>
<div class="container p-4">
	Large padding container
</div>

Nested Containers

Containers can be nested to create complex layouts.

Outer Container
Nested Container 
<div class="container">
	Outer container content
	<div class="container">
		Nested container content
	</div>
</div>

Container with Grid

Containers work seamlessly with the grid system for complex layouts.

Column 1
Column 2
<div class="container">
	<div class="grid grid-cols-2 gap-3">
		<div>Column 1</div>
		<div>Column 2</div>
	</div>
</div>

Responsive Behavior

Containers automatically adjust their width based on screen size. Resize your browser to see how they respond.

Responsive Container
Width adjusts based on viewport 
/* CSS Variables */
:root {
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
}
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: var(--breakpoint-xl);
}

Container with Card

Combining containers with cards for common layout patterns.

Card Title

This card is contained within a container class for proper spacing and alignment.

<div class="container">
	<div class="card">
		<h3>Card Title</h3>
		<p>Card content...</p>
	</div>
</div>

Container Best Practices