Overview
Source: ./src/fragments/gap/Gap.mdx
Gap
The gap fragment provides utility classes for consistent spacing between items in grid or flex containers.
Skip to:
Gap classes
The following classes are available for setting the gap between items:
| Class name | Value | Description |
|---|---|---|
oc-gap-0 |
0px | No gap |
oc-gap-12 |
2px | Extra small gap |
oc-gap-25 |
4px | Small gap |
oc-gap-50 |
8px | Medium gap |
oc-gap-75 |
12px | Large gap |
oc-gap-100 |
16px | Extra large gap |
oc-gap-150 |
24px | XX-large gap |
oc-gap-200 |
32px | XXX-large gap |
oc-gap-250 |
40px | Maximum gap |
Usage guidelines
To use the gap utilities, add the appropriate CSS class to your grid or flex container.
For example, to apply a 16px gap, use the oc-gap-100 class:
<div class="oc-gap-100">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Use the controls in the interactive gap demo to see these classes in action.
Accessibility
See the accessibility documentation for general guidelines on making your content accessible.
Layout and spacing/Gap (Gap.stories.ts)
Demo: Gap
Story: fragments-layout-and-spacing-gap--default · tags: