Grid

A flexbox based grid system component.

npm version

npm install @vrembem/grid
@import "vrembem/grid/index";

grid + grid__item

...
...
...
<div class="grid">
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
</div>

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>

flex_justify_[value]

Change the justify-content property of grid columns using the flex_justify_[value] utility. Best used along with the grid_auto modifier. Avaliable values are:

  • flex_justify_start
  • flex_justify_center
  • flex_justify_end
  • flex_justify_between
  • flex_justify_around
  • flex_justify_evenly
...
...
<div class="grid flex_justify_start">...</div>
...
...
<div class="grid flex_justify_center">...</div>
...
...
<div class="grid flex_justify_end">...</div>
...
...
<div class="grid flex_justify_between">...</div>

flex_align_[value]

Adjust the align-items property of grid columns using the flex_align_[value] utility. Avaliable values are:

  • flex_align_start
  • flex_align_center
  • flex_align_end
  • flex_align_stretch
  • flex_align_baseline
...
...
<div class="grid flex_align_start">
  <div class="grid__item" style="height: 100px;">...</div>
  <div class="grid__item">...</div>
</div>
...
...
<div class="grid flex_align_center">
  <div class="grid__item" style="height: 100px;">...</div>
  <div class="grid__item">...</div>
</div>
...
...
<div class="grid flex_align_end">
  <div class="grid__item" style="height: 100px;">...</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_break_[breakpoint]

Adds a breakpoint for when grid items should be stacked vertically. Also available is the grid_break modifier which stacks grid items under all conditions.

...
...
...
...
...
...
...
...
...
...
...
...
<div class="grid grid_break">...</div>
<div class="grid grid_break_xs">...</div>
<div class="grid grid_break_sm">...</div>
<div class="grid grid_break_md">...</div>
<div class="grid grid_break_lg">...</div>
<div class="grid grid_break_xl">...</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_[type]

Modifiers that adjust the gutters between content tracks.

...
...
...
...
...
...
...
<div class="grid grid_gap_none">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_xs">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_sm">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_md">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_lg">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_xl">...</div>