Gaps

First Published On:

April 25, 2024

Last Updated:

July 25, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Gaps work when applied to elements with one of the following classes:

.display__flex-h
.display__flex-v
.display__grid

Class Name	CSS Properties
`.gap__2xs`	`gap: var(--2xs);`
`.gap__xs`	`gap: var(--xs);`
`.gap__sm`	`gap: var(--sm);`
`.gap__md`	`gap: var(--md);`
`.gap__lg`	`gap: var(--lg);`
`.gap__xl`	`gap: var(--xl);`
`.gap__2xl`	`gap: var(--2xl);`

Recommended Usage

Customization

Resources that mention this topic

No items found.

info

Get Help from a LiftKit Expert

arrow_forward

Book Quick Chat

Give Us Feedback

Click or tap to reveal form.

expand_more

check_circle

Success! An email has been sent to you with more details.

Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.

error

Error: Something went wrong. Email info@chainlift.io directly for assistance.

/* Gaps */
@import "globals.css";


.gap__2xs {
  gap: var(--2xs);
}

.gap__xs {
  gap: var(--xs);
}

.gap__sm {
  gap: var(--sm);
}

.gap__md {
  gap: var(--md);
}

.gap__lg {
  gap: var(--lg);
}

.gap__xl {
  gap: var(--xl);
}

.gap__2xl {
  gap: var(--2xl);
}

content_copy

code snippets will appear here

Theme Setup

Building a Layout

Arranging Content

Styling Elements

LiftKit Components

Gaps

Overview

Recommended Usage

Customization

Resources that mention this topic

Get Help from a LiftKit Expert

Give Us Feedback