grid
The most basic implementation of the grid component consists of two elements. By default, grid__item
’s split the available space within the grid
parent evenly:
grid
grid__item
<div class="grid">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Grid is a flex based layout component. That means you can use the
@vremben/utility
package—specificallyflex
andspan
modules—to further customize your layout.
grid__clear
The clear element allows you to start a new row at any point in a column set.
<div class="grid">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__clear"></div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
grid_auto
Gives grid items a basis of auto so their content dictates their width.
<div class="grid grid_auto">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Set an individual grid item to auto using grid__item_auto
element modifier.
<div class="grid">
<div class="grid__item grid__item_auto">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
grid_fill
The fill modifier stretches grid item’s contents to fill the height of it’s container.
<div class="grid grid_fill">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Set an individual grid item to fill using the grid__item_fill
element modifier.
<div class="grid">
<div class="grid__item">...</div>
<div class="grid__item grid__item_fill">...</div>
<div class="grid__item">...</div>
</div>
grid_gap_[key]
Modifiers that adjust the gutter spacing between grid__item
elements. Gap key output is based on the values in $gap-map
variable map.
<div class="grid grid_gap_xs">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Available Variations
grid_gap_none
grid_gap_xs
grid_gap_sm
grid_gap_md
grid_gap_lg
grid_gap_xl
grid_gap-x_[key]
Adjusts the horizontal gap spacing based on the provided key. Gap key output is based on the values in $gap-map
variable map.
<div class="grid grid_gap-x_xs">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Available Variations
grid_gap-x_none
grid_gap-x_xs
grid_gap-x_sm
grid_gap-x_md
grid_gap-x_lg
grid_gap-x_xl
grid_gap-y_[key]
Adjusts the vertical gap spacing based on the provided key. Gap key output is based on the values in $gap-map
variable map.
<div class="grid grid_gap-y_xs">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Available Variations
grid_gap-y_none
grid_gap-y_xs
grid_gap-y_sm
grid_gap-y_md
grid_gap-y_lg
grid_gap-y_xl
grid_stack_[key]
Adds a breakpoint for when grid items should be stacked vertically. Values and class keys are generated using the $breakpoints
map. Omitting the key value from the modifier (e.g. grid_stack
) will stack items under all conditions.
<div class="grid grid_stack_md">
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Available Variations
grid_stack
grid_stack_xs
grid_stack_sm
grid_stack_md
grid_stack_lg
grid_stack_xl
span
Set the flex-basis, width and max-width on an element using the span
module. Span column widths are built from the $span-columns
variable. Breakpoint keys are built from the $breakpoints
variable map. These are the available variants:
span-[col]-[key]
- Sets the number of columns an element should span with an optional breakpoint condition.span-auto-[key]
- Sets an elements width toauto
with an optional breakpoint condition.span-full-[key]
- Sets an elements width to100%
with an optional breakpoint condition.
Variable | Default | Description |
---|---|---|
$output-span | true | Toggles the output of this module. |
$class-span | "span" | String to use for the class name of the span module. |
$prefix-span | null | String to prefix the span module with. |
$span-columns | 12 | The columns value to use when building span variants. |
span-[col]-[key]
Sets the number of columns an element should span with an optional breakpoint condition.
<div class="grid">
<div class="grid__item span-6">...</div>
<div class="grid__item span-6">...</div>
<div class="grid__clear"></div>
<div class="grid__item span-6">...</div>
<div class="grid__item span-3">...</div>
<div class="grid__item span-3">...</div>
</div>
Here’s an example of using the optional breakpoint variants. Breakpoints variants should be added with a mobile-first approach.
<div class="grid">
<div class="grid__item span-12 span-6-xs span-8-sm span-4-md span-3-lg">...</div>
<div class="grid__item span-12 span-6-xs span-4-sm span-4-md span-3-lg">...</div>
<div class="grid__item span-12 span-6-xs span-4-sm span-4-md span-3-lg">...</div>
<div class="grid__item span-12 span-6-xs span-8-sm span-12-md span-3-lg">...</div>
</div>
span-auto-[key]
Sets an elements width to auto
with an optional breakpoint condition.
<div class="grid">
<div class="grid__item span-auto">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
span-full-[key]
Sets an elements width to 100%
with an optional breakpoint condition.
<div class="grid">
<div class="grid__item span-full">...</div>
<div class="grid__item">...</div>
<div class="grid__item">...</div>
</div>
Sass variables
Variable | Default | Description |
---|---|---|
$prefix-block | null | String to prefix blocks with. |
$prefix-element | "__" | String to prefix elements with. |
$prefix-modifier | "_" | String to prefix modifiers with. |
$prefix-modifier-value | "_" | String to prefix modifier values with. |
$breakpoints | core.$breakpoints Ref ↓ | The breakpoints map the grid_stack_[key] modifier uses to build its styles. |
$gap | 2em | The default gap spacing for the grid component. |
$gap-map | Sass Map Ref ↓ | Used to output gap modifiers. |
$breakpoints
The breakpoints map the grid_stack_[key]
modifier uses to build its styles.
// Inherited from: core.$breakpoints
$breakpoints: (
"xs": 480px,
"sm": 620px,
"md": 760px,
"lg": 990px,
"xl": 1380px
) !default;
$gap-map
Used to output gap modifiers.
$gap-map: (
"none": 0,
"xs": 0.5em,
"sm": 1em,
"md": 2em,
"lg": 3em,
"xl": 4em
) !default;