0
0
SASSmarkup~5 mins

Container and wrapper patterns in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Containers and wrappers help keep your webpage content neat and centered. They control the width and spacing so everything looks good on different screen sizes.

To center content on a page like text or images.
To limit how wide content can stretch on large screens.
To add consistent padding around groups of elements.
To create sections that adapt nicely on phones and desktops.
To separate different parts of a webpage visually.
Syntax
SASS
@mixin container($max-width: 1200px, $padding: 1rem) {
  width: 100%;
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
  padding-left: $padding;
  padding-right: $padding;
}

.wrapper {
  @include container();
}

The @mixin defines reusable styles for containers.

Using margin-left: auto and margin-right: auto centers the container horizontally.

Examples
This example sets a smaller max width and more padding on the sides.
SASS
@mixin container($max-width: 960px, $padding: 2rem) {
  width: 100%;
  max-width: $max-width;
  margin: 0 auto;
  padding: 0 $padding;
}

.wrapper {
  @include container();
}
A simple container class without mixins, using fixed values.
SASS
.container {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
A fluid container that always fills the screen width but keeps side padding.
SASS
@mixin container-fluid($padding: 1rem) {
  width: 100%;
  padding-left: $padding;
  padding-right: $padding;
}

.wrapper-fluid {
  @include container-fluid();
}
Sample Program

This example shows a container pattern using a Sass mixin. The container centers the content, limits its width to 800px, and adds padding on the sides. It also changes padding on small screens for better mobile viewing.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Container and Wrapper Example</title>
  <style>
    /* CSS cannot contain Sass variables or mixins directly */
  </style>
</head>
<body>
  <div class="wrapper">
    <h1>Welcome to My Page</h1>
    <p>This content is inside a centered container with padding.</p>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Containers help keep your page content easy to read by limiting width.

Use padding inside containers to prevent text from touching screen edges.

Responsive design means adjusting container padding or width on small screens.

Summary

Containers center and limit content width for better layout.

Wrappers often use mixins in Sass to reuse container styles easily.

Always consider padding and responsiveness for good user experience.