SimpleCSS
Download

🗂️ Container

📦 What are containers used for?

Containers are used to structure page layout by defining a maximum or fluid width depending on the screen size. They help center the content, control its reading width, and ensure comfortable spacing across mobile, tablet, and desktop devices.

💠 Examples

The current configuration sets the typographic baseline to 1rem = 10px, using html { font-size: 62.5%; }.

Container (120rem)
Container-sm (100rem)
Container-md (120rem)
Container-lg (140rem)
Container-fluid (80%)
Container-fluid-sm (70%)
Container-fluid-md (80%)
Container-fluid-lg (90%)

💻 HTML Code

Container (120rem)
Container-sm (100rem)
Container-md (120rem)
Container-lg (140rem)
Container-fluid (80%)
Container-fluid-sm (70%)
Container-fluid-md (80%)
Container-fluid-lg (90%)

📏 Container Sizes

Just choose the container size you need, and it will automatically apply its own width or max-width based on your layout, while remaining fully responsive across breakpoints.

.container
.container-sm
.container-md
.container-lg
.container-fluid
.container-fluid-sm
.container-fluid-md
.container-fluid-lg

⚙️ Variables CSS

Variable Description
--container-fluid-padding Padding applied inside the fluid container.
--container-fluid-width Default width of the fluid container.
--container-fluid-width-lg Width of the fluid container for large screens.
--container-fluid-width-md Width of the fluid container for medium screens.
--container-fluid-width-sm Width of the fluid container for small screens.
--container-padding Padding applied inside the fixed container.
--container-width Default width of the fixed container.
--container-width-lg Width of the fixed container for large screens.
--container-width-md Width of the fixed container for medium screens.
--container-width-sm Width of the fixed container for small screens.