Skip to main content

Container

Use Container to structure sections, columns, grids, rows, cards, and nested layouts. It is the main layout element behind many Atomicat page designs.

How It Works In Atomicat​

The 3.0 container drawer lets you switch between flexbox and grid layouts, set width or max width depending on whether the selected container is the first container, control minimum height, and configure responsive desktop/tablet/mobile values. Grid mode can create or remove child containers as you change columns and rows. Flex mode exposes direction, auto-flow, justification, alignment, wrapping, and align-content controls. Containers also support badges and extensive style settings such as background, borders, spacing, and shadows.

When To Use It​

  • Build a hero section, offer block, product row, or multi-column proof area.
  • Group related elements so spacing and background are managed once.
  • Create responsive grid layouts that collapse cleanly on mobile.
  • Add nested containers for cards or tab content without custom HTML.

Configure The Element​

  • Choose flex for linear layouts and grid for equal columns or rows.
  • Set width, max width, and min height before fine-tuning inner elements.
  • In grid mode, adjust columns and rows carefully because Atomicat may add or remove generated child containers.
  • Use responsive mode to review each breakpoint rather than copying desktop spacing to mobile.
  • Keep nested containers named or organized in the canvas to avoid editing the wrong layer.

Testing Notes​

  • Preview desktop, tablet, and mobile after changing display mode.
  • Check that generated grid cells still contain the intended elements after reducing columns or rows.
  • Test clickable elements inside containers after adding overlays, badges, or custom backgrounds.

Limitations And Tips​

  • Deep nesting makes pages harder to maintain and can create spacing conflicts.
  • Grid reductions may remove only generated/empty containers safely; review content before reducing layout size.
  • Use Container for layout, not as a substitute for semantic text or button elements.

FAQ​

Should I use flex or grid?

Use flex for a row or column flow; use grid when you need predictable columns and rows.

Why did new containers appear?

In grid mode, the drawer creates child containers to match the selected column and row count.

Can containers be responsive?

Yes. Width, min-height, grid, flex, alignment, and spacing controls are responsive across devices.