Grid
Grid & Columns
To create a grid, add class .grid or use data attribute data-grid and add params.
Use class .col-$ or attribute data-col="$" to create columns into a grid.
For example: .col-11
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11
HTML
<!-- Class Method -->
<div class="grid">
<div class="col-1">1</div>
<div class="col-11">11</div>
</div>
<!-- HTML Data Method -->
<div data-grid>
<div class="col-6">6</div>
<div class="col-6">6</div>
</div>
Scss
.my-custom-row {
@include grid;
}
.my-column-left {
@include columns(4);
}
.my-column-main {
@include columns(8);
}
Order
Use data attribute data-order="$" to reorder grid columns.
Only can reorder columns in a grid.
You can use data-order, data-order-small and data-order-medium to reorder in different media queries.
Original Position: 1
Original Position: 2
Original Position: 3
5
7
HTML
<div data-grid>
<div class="col-5" data-order="2" data-order-small="1">First Column</div>
<div class="col-7" data-order="1" data-order-small="2">Second Column</div>
</div>
Direction (Flow)
Define in data attribute data-grid="$" flow of the grid.
Row by default
Row
1
2
3
HTML
<div data-grid="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-row;
}
Row reverse
1
2
3
HTML
<div data-grid="row-reverse">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-row-reverse;
}
Column
1
2
3
HTML
<div data-grid="column">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-column;
}
Column reverse
1
2
3
HTML
<div data-grid="column-reverse">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-column-reverse;
}
Wrap
Define in data attribute data-grid="$" wrap of the grid.
Wrap by default
Wrap
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="wrap">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-wrap;
}
Wrap reverse
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="wrap-reverse">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-wrap-reverse;
}
Nowrap
1
2
3
4
5
6
7
HTML
<div data-grid="nowrap">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-nowrap;
}
Align
Define align of the grid.
Left by default
Left
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="left">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-left;
}
Center
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="center">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-center;
}
Right
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="right">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-right;
}
Space Between
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="space-between">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-between;
}
Space Around
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="space-around">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-around;
}
Vertical Align
Define vertical align of the grid.
Row by default
Stretch
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus, eu cursus nulla accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
HTML
<div data-grid="va-stretch">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-va-stretch;
}
Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus, eu cursus nulla accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
HTML
<div data-grid="va-top">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-va-top;
}
Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus, eu cursus nulla accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
HTML
<div data-grid="va-center">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-va-center;
}
Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus, eu cursus nulla accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
HTML
<div data-grid="va-bottom">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-va-bottom;
}
Baseline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus, eu cursus nulla accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
Nunc feugiat sapien et quam tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus orci quis erat eleifend, quis molestie dolor ultricies.
HTML
<div data-grid="va-baseline">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-va-baseline;
}
Content Align
Stretch
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="ca-stretch">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-ca-stretch;
}
Top
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="ca-top">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-ca-top;
}
Center
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="ca-center">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-ca-center;
}
Bottom
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="ca-bottom">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-ca-bottom;
}
Space Around
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="ca-space-around">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-ca-space-around;
}
Space Between
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="ca-space-between">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-ca-space-between;
}
Grid Helpers
Center Horizontally and Vertically
1
2
3
4
5
6
7
8
9
10
HTML
<div data-grid="center-center">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-row {
@include grid;
@include grid-center-center;
}
Push Left
1
2
3
4
5
6 - Pushed
HTML
<div data-grid>
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1 push-left">3</div>
</div>
Scss
.my-custom-column {
@include push-left;
}
Push Right
1 - Pushed
2
3
4
5
6
HTML
<div data-grid>
<div class="col-1 push-right">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
</div>
Scss
.my-custom-column {
@include push-right;
}