Grid
Common grid stack layout partial
| Class | Type | |
|---|---|---|
grid
|
Grid Container | A class representing a grid container |
1
2
3
<div class="grid" data-columns="12">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
Defining spacing
The space injected between components.
| Property | attribute | Type | Default |
|---|---|---|---|
gap
|
data-grid-gap |
none,xs,s,m,l,xl,xxl
|
m
|
1
2
3
4
5
6
7
8
9
<div class="grid" data-grid-gap="s">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
Defining (Minimum) Item Size
Default size is minimum of 160px
| Property | attribute | |
|---|---|---|
grid-item-min-width
|
data-grid-item-min-width |
40,80,120,160,200,240 ,280
|
1
2
3
4
5
6
7
8
9
<div class="grid" data-grid-item-min-width="80">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
Columns Behavior
Behavior of columns when first row isn’t full. Default value is “fill” which put the max of columns that can fit in a row.
The “fit” value will resize the items in a row to achieve full line.
| Property | attribute | |
|---|---|---|
grid-item-behavior
|
data-grid-filling |
fill,fit
|
Demo of fit value
1
2
3
<div class="grid" data-grid-item-min-width="160" data-grid-filling="fit">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>