Wrapper Feature
The wrapper feature is used for centering areas with a maximum width.
Settings
| Name | Description | Type | Default value |
|---|---|---|---|
$wrapper-feature |
Enable the wrapper feature | Boolean | false |
$wrapper-attr-name |
Attribute name for the wrapper | String | 'data-#($grid-id)-wrapper' |
$wrapper-max-widths |
Maximum widths for the wrapper | Map | (xl: 1200) |
Note: the maximum width can also be determined for specific breakpoints.
Example implementation
The element with the wrapper attribute will have a maximum width of 600 px in breakpoint "s" and 1400 px in breakpoint "xl".
@include srgrid-create-grid(
$wrapper-feature: true,
$wrapper-max-widths: (s: 600, xl: 1400)
);
<div data-srgrid>
<div data-srgrid-wrapper> <!-- wrapper element -->
<div data-srgrid-row>
<div data-srgrid-col>
...
</div>
</div>
</div>
</div>