DesignDojo
1.2-components · 01-container

Estimated time: 6 min

Max width frameOuter marginOuter margin
Container anatomy

When to Use

  • Page layout root for dashboards, docs, and marketing pages.
  • Readable text width so paragraphs stay comfortable.
  • Consistent horizontal padding across breakpoints.

When NOT to Use

Use one container per page section and keep child blocks aligned to it.

Use full-bleed sections for rare visual breaks like hero backgrounds. Keep core content constrained even when backgrounds are wide.

Variants

sm: ~640px
md: ~768px
lg: ~1200px

Confused?

If you are deciding between Container and Grid, start with container first, then place a grid inside it.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Create a page container with a max width around 1200px, centered horizontally, with responsive side padding that scales from mobile to desktop.

Pencil Prompt

Add a centered container frame that constrains content width while keeping generous side padding at all breakpoints.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Grid