Skip to main content
Rivet Design System Indiana University

Gap

Set spacing between rows and columns

Overview #

Use the gap utilities on a parent element to set the spacing between rows and columns of child elements.

Examples #


Open in new window
Copy link to example 
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-none">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-xxs rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-xs rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-sm rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-md rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-lg rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-xxl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-3-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-4-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
Open in new window
Copy link to example 
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-none">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-xxs rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-xs rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-sm rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-md rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-lg rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-xxl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-3-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-wrap rvt-gap-col-4-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
Open in new window
Copy link to example 
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-none">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-xxs rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-xs rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-sm rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-md rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-lg rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-xxl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-3-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>
<div class="rvt-border-all rvt-bg-black-000 rvt-p-all-sm rvt-flex rvt-flex-column rvt-gap-row-4-xl rvt-m-top-sm">
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item one</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item two</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item three</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item four</div>
  <div class="rvt-border-all rvt-p-all-xs rvt-bg-white">Item five</div>
</div>

Usage #

Set a parent element’s gap, column-gap, or row-gap CSS properties using the following classes:

  • .rvt-gap-*
  • .rvt-gap-col-*
  • .rvt-gap-row-*

Replace * with any of Rivet’s spacing values, such as .rvt-gap-md.