Grids

24 Grids System.

$breakpoints : (
    s : 0,
    m : 640px,
    l : 850px,
    lg : 1024px,
    xl : 1440px
);

To define the columns use the breakpoint-grid-numbernomenclature.

1
2
3
3 cols
Any direct child of .SnGrid is automatically an item in the layout. And it will automatically take a column from its container.
<div class="SnGrid col-gap s-grid-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
4 cols
<div class="SnGrid col-gap s-grid-4">
    <div>1</div>
    <div class="s-col-3">2</div>
</div>
1
2
3
4
5
6
7
Responsive 1 - 12
<div class="SnGrid col-gap row-gap s-grid-2 m-grid-3 l-grid-4 lg-grid-5 xl-grid-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>
1
2
3
row span
<div class="SnGrid col-gap row-gap s-grid-2">
    <div class="s-row-2">1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
4
5
X - Y / col span - row span
<div class="SnGrid col-gap row-gap s-grid-4">
    <div class="s-row-2">1</div>
    <div>2</div>
    <div class="s-y-2 s-x-2 s-col-2">3</div>
    <div>4</div>
    <div class="s-row-2">5</div>
</div>
1
2
3
4
5
Inner
<div class="SnGrid col-gap row-gap l-grid-4">
    <div class="s-col-3 SnGrid col-gap row-gap s-grid-3">
        <div class="s-col-3">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div>5</div>
</div>

API

PropertyClass
Gap .col-gap.row-gap
Gap size .gap-0.gap-1.gap-2.gap-3
Colums
breakpoint-grid-number
m-grid-1m-grid-2m-grid-3m-grid-4m-grid-5m-grid-6m-grid-7m-grid-8m-grid-9m-grid-10m-grid-11m-grid-12
Col span
breakpoint-col-number
m-grid-1m-grid-2m-grid-3m-grid-4m-grid-5m-grid-6m-grid-7m-grid-8m-grid-9m-grid-10m-grid-11m-grid-12
Row span
breakpoint-row-number
m-grid-1m-grid-2m-grid-3m-grid-4m-grid-5m-grid-6m-grid-7m-grid-8m-grid-9m-grid-10m-grid-11m-grid-12
Start X
breakpoint-x-number
m-grid-1m-grid-2m-grid-3m-grid-4m-grid-5m-grid-6m-grid-7m-grid-8m-grid-9m-grid-10m-grid-11m-grid-12
Start Y
breakpoint-y-number
m-grid-1m-grid-2m-grid-3m-grid-4m-grid-5m-grid-6m-grid-7m-grid-8m-grid-9m-grid-10m-grid-11m-grid-12