Grid Gap
Grid gap is space between row or columns.
Gap
Click to copy
<div class="grid grid-gap-xs"></div>
Available Classes
.grid-gap-xs.grid-gap-s.grid-gap-m.grid-gap-l.grid-gap-xl.grid-gap-xxl
Examples
grid-gap-xs
Element 1
Element 2
Element 3
grid-gap-s
Element 1
Element 2
Element 3
grid-gap-m
Element 1
Element 2
Element 3
grid-gap-l
Element 1
Element 2
Element 3
grid-gap-xl
Element 1
Element 2
Element 3
grid-gap-xxl
Element 1
Element 2
Element 3
Grid sizes will be pulled from Base > Space sizes
Gap Sizes
Click to copy
:root {
--space-xs: 2px;
--space-s: 5px;
--space-m: 10px;
--space-l: 25px;
--space-xl: 50px;
--space-xxl: 100px;
}
Comments Area
No comments have been posted yet. Please feel free to comment first!
Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!