Skip to main content

Inset Grid Space

Version: 0.9.0
Edit

Utilities that define the grid gap between grid items.

Space Grid Inset

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-grid-insets.scss#L11

Space Grid Inset
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Compact
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Tight
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Loose
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Expanded
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Spacious
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Zero
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset XXXS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset XXS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset XS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Small
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Medium
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Large
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset XL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset XXL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset XXXL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Inherit
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Initial
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Unset
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
<!-- space grid inset -->
<div class="u-space-grid-inset">
  <div>Space Grid Inset</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset compact -->
<div class="u-space-grid-inset-compact">
  <div>Space Grid Inset Compact</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset tight -->
<div class="u-space-grid-inset-tight">
  <div>Space Grid Inset Tight</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset loose -->
<div class="u-space-grid-inset-loose">
  <div>Space Grid Inset Loose</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset expanded -->
<div class="u-space-grid-inset-expanded">
  <div>Space Grid Inset Expanded</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset spacious -->
<div class="u-space-grid-inset-spacious">
  <div>Space Grid Inset Spacious</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset zero -->
<div class="u-space-grid-inset-zero">
  <div>Space Grid Inset Zero</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset xxxs -->
<div class="u-space-grid-inset-xxxs">
  <div>Space Grid Inset XXXS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset xxs -->
<div class="u-space-grid-inset-xxs">
  <div>Space Grid Inset XXS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset xs -->
<div class="u-space-grid-inset-xs">
  <div>Space Grid Inset XS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset sm -->
<div class="u-space-grid-inset-sm">
  <div>Space Grid Inset Small</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset md -->
<div class="u-space-grid-inset-md">
  <div>Space Grid Inset Medium</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset lg -->
<div class="u-space-grid-inset-lg">
  <div>Space Grid Inset Large</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset xl -->
<div class="u-space-grid-inset-xl">
  <div>Space Grid Inset XL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset xxl -->
<div class="u-space-grid-inset-xxl">
  <div>Space Grid Inset XXL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset xxxl -->
<div class="u-space-grid-inset-xxxl">
  <div>Space Grid Inset XXXL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset inherit -->
<div class="u-space-grid-inset-inherit">
  <div>Space Grid Inset Inherit</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset initial -->
<div class="u-space-grid-inset-initial">
  <div>Space Grid Inset Initial</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset unset -->
<div class="u-space-grid-inset-unset">
  <div>Space Grid Inset Unset</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Space Grid Inset Squish

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-grid-insets.scss#L282

Space Grid Inset Squish
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Tight
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Loose
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Expanded
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Spacious
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish XXS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish XS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Small
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Medium
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish Large
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish XL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish XXL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Squish XXXL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
<!-- space grid inset squish -->
<div class="u-space-grid-inset-squish">
  <div>Space Grid Inset Squish</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish tight -->
<div class="u-space-grid-inset-squish-tight">
  <div>Space Grid Inset Squish Tight</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish loose -->
<div class="u-space-grid-inset-squish-loose">
  <div>Space Grid Inset Squish Loose</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish expanded -->
<div class="u-space-grid-inset-squish-expanded">
  <div>Space Grid Inset Squish Expanded</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish spacious -->
<div class="u-space-grid-inset-squish-spacious">
  <div>Space Grid Inset Squish Spacious</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish xxs -->
<div class="u-space-grid-inset-squish-xxs">
  <div>Space Grid Inset Squish XXS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish xs -->
<div class="u-space-grid-inset-squish-xs">
  <div>Space Grid Inset Squish XS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish sm -->
<div class="u-space-grid-inset-squish-sm">
  <div>Space Grid Inset Squish Small</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish md -->
<div class="u-space-grid-inset-squish-md">
  <div>Space Grid Inset Squish Medium</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish lg -->
<div class="u-space-grid-inset-squish-lg">
  <div>Space Grid Inset Squish Large</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish xl -->
<div class="u-space-grid-inset-squish-xl">
  <div>Space Grid Inset Squish XL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish xxl -->
<div class="u-space-grid-inset-squish-xxl">
  <div>Space Grid Inset Squish XXL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset squish xxxl -->
<div class="u-space-grid-inset-squish-xxxl">
  <div>Space Grid Inset Squish XXXL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>

Space Grid Inset Stretch

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/space-grid-insets.scss#L461

Space Grid Inset Stretch
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Tight
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Loose
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Expanded
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Spacious
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch XXS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch XS
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Small
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Medium
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch Large
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch XL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch XXL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Space Grid Inset Stretch XXXL
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
<!-- space grid inset stretch -->
<div class="u-space-grid-inset-stretch">
  <div>Space Grid Inset Stretch</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch tight -->
<div class="u-space-grid-inset-stretch-tight">
  <div>Space Grid Inset Stretch Tight</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch loose -->
<div class="u-space-grid-inset-stretch-loose">
  <div>Space Grid Inset Stretch Loose</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch expanded -->
<div class="u-space-grid-inset-stretch-expanded">
  <div>Space Grid Inset Stretch Expanded</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch spacious -->
<div class="u-space-grid-inset-stretch-spacious">
  <div>Space Grid Inset Stretch Spacious</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch xxs -->
<div class="u-space-grid-inset-stretch-xxs">
  <div>Space Grid Inset Stretch XXS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch xs -->
<div class="u-space-grid-inset-stretch-xs">
  <div>Space Grid Inset Stretch XS</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch sm -->
<div class="u-space-grid-inset-stretch-sm">
  <div>Space Grid Inset Stretch Small</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch md -->
<div class="u-space-grid-inset-stretch-md">
  <div>Space Grid Inset Stretch Medium</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch lg -->
<div class="u-space-grid-inset-stretch-lg">
  <div>Space Grid Inset Stretch Large</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch xl -->
<div class="u-space-grid-inset-stretch-xl">
  <div>Space Grid Inset Stretch XL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch xxl -->
<div class="u-space-grid-inset-stretch-xxl">
  <div>Space Grid Inset Stretch XXL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>
<!-- space grid inset stretch xxxl -->
<div class="u-space-grid-inset-stretch-xxxl">
  <div>Space Grid Inset Stretch XXXL</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</div>