Block grid - Usage with functions:
Stylus code:
.my-custom-class-for-grid
grid()
.my-custom-class-for-grid-cell
cell(1, 1)
+above(rem-calc(breakpoints[md]))
cell(1, 2)
+above(rem-calc(breakpoints[lg]))
cell(1, 3)
+above(rem-calc(breakpoints[xlg]))
cell(1, 4)
+above(rem-calc(breakpoints[xxlg]))
cell(1, 6)
HTML code:
<div class="my-custom-class-for-grid">
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed, rerum ratione at modi sunt!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="my-custom-class-for-grid-cell">
Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
You can align all cells vertically by using:
Block grid - Usage with helper classes:
Html code:
<div class="s-grid-top s-grid-sm-12 s-grid-md-6 s-grid-lg-4 s-grid-xlg-3 s-grid-xxlg-2">
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae!
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed, rerum ratione at modi sunt!
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet.
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet.
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet.
</div>
</div>
Effects:
You can align all cells vertically by using:
You can also add:
Block grid top example (s-grid-top)
Block grid bottom example (s-grid-bottom)
Block grid center example (s-grid-center)
Block grid stretch example (s-grid-stretch)
Block grid justify-center example (s-grid-top s-grid-justify-center)
Stylus code:
.my-custom-class-for-grid2
grid()
.my-custom-class-for-grid-cell2
&.type1
cell(1, 1)
+above(rem-calc(breakpoints[md]))
cell(1, 2)
+above(rem-calc(breakpoints[lg]))
cell(1, 3)
&.type2
cell(1, 1, 'center')
+above(rem-calc(breakpoints[lg]))
cell(1, 3, 'center')
&.type3
cell(1, 1)
+above(rem-calc(breakpoints[md]))
cell(1, 2)
+above(rem-calc(breakpoints[lg]))
cell(1, 1)
&.type4
cell(1, 2)
+above(rem-calc(breakpoints[lg]))
cell(2, 3)
&.type5
cell(1, 1, 'bottom')
+above(rem-calc(breakpoints[sm]))
cell(1, 2, 'bottom')
+above(rem-calc(breakpoints[md]))
cell(1, 1, 'bottom')
+above(rem-calc(breakpoints[lg]))
cell(1, 3, 'bottom')
&.type6
cell(1, 1)
+above(rem-calc(breakpoints[sm]))
cell(1, 3)
&.type7
cell(1, 1)
+above(rem-calc(breakpoints[sm]))
cell(1, 2)
cell-offset(1, 6)
HTML code:
<div class="my-custom-class-for-grid2">
<div class="my-custom-class-for-grid-cell2 type1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell2 type1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quaerat officiis doloribus commodi totam molestiae, maxime id, nisi sit veniam ipsam quam accusantium, quo iusto voluptatibus sequi. Quibusdam perspiciatis, dolor.
</div>
<div class="my-custom-class-for-grid-cell2 type2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="my-custom-class-for-grid-cell2 type3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed, rerum ratione at modi sunt!
</div>
<div class="my-custom-class-for-grid-cell2 type4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure distinctio, assumenda, molestias culpa ad debitis qui odio quidem at, dolore nobis dolorem minus ea! Aspernatur minus commodi, tempora optio consequatur temporibus placeat perferendis possimus est veniam corrupti eum atque tempore dignissimos illum totam fuga error ea. Explicabo impedit, temporibus totam.
</div>
<div class="my-custom-class-for-grid-cell2 type5">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell2 type6">
Lorem ipsum dolor sit amet.
</div>
<div class="my-custom-class-for-grid-cell2 type7">
Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
You can use individual clasess for vertical positioning (examples):
You can also use offsets here (examples):
HTML code:
<div class="s-grid-top">
<div class="s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6 s-grid-cell-lg-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6 s-grid-cell-lg-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quaerat officiis doloribus commodi totam molestiae, maxime id, nisi sit veniam ipsam quam accusantium, quo iusto voluptatibus sequi. Quibusdam perspiciatis, dolor.
</div>
<div class="s-grid-cell s-grid-cell-center s-grid-cell-sm-12 s-grid-cell-md-12 s-grid-cell-lg-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6 s-grid-cell-lg-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed, rerum ratione at modi sunt!
</div>
<div class="s-grid-cell s-grid-cell-sm-6 s-grid-cell-md-6 s-grid-cell-lg-8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure distinctio, assumenda, molestias culpa ad debitis qui odio quidem at, dolore nobis dolorem minus ea! Aspernatur minus commodi, tempora optio consequatur temporibus placeat perferendis possimus est veniam corrupti eum atque tempore dignissimos illum totam fuga error ea. Explicabo impedit, temporibus totam.
</div>
<div class="s-grid-cell s-grid-cell-bottom s-grid-cell-sm-6 s-grid-cell-md-12 s-grid-cell-lg-4">
Lorem ipsum dolor sit amet.
</div>
<div class="s-grid-cell s-grid-cell-sm-4">
Lorem ipsum dolor sit amet.
</div>
<div class="s-grid-cell s-grid-cell-sm-6 s-grid-cell-offset-sm-2">
Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
You can use individual clasess for vertical positioning:
You can also use offsets here, just add classes like:
Stylus code:
.my-custom-class-for-grid3
grid()
.my-custom-class-for-grid-cell3
cell(1, 1)
+above(rem-calc(breakpoints[lg]))
cell(1, 2)
.my-custom-class-for-grid3_1
grid()
.my-custom-class-for-grid-cell3_1
cell(1, 1)
+above(rem-calc(breakpoints[lg]))
cell(1, 2)
HTML code:
<div class="my-custom-class-for-grid3">
<div class="my-custom-class-for-grid-cell3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell3">
<div class="my-custom-class-for-grid3_1">
<div class="my-custom-class-for-grid-cell3_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dicta?
</div>
<div class="my-custom-class-for-grid-cell3_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse molestiae odit iusto at sapiente dicta reiciendis doloremque optio, atque!
</div>
</div>
</div>
</div>
Effect:
HTML code:
<div class="s-grid-top s-grid-sm-12 s-grid-lg-6">
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="s-grid-cell">
<div class="s-grid-top s-grid-sm-12 s-grid-lg-6">
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dicta?
</div>
<div class="s-grid-cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse molestiae odit iusto at sapiente dicta reiciendis doloremque optio, atque!
</div>
</div>
</div>
</div>
Effect:
You can change the direction of the grid cells
If you use the column direction (top to bottom or bottom to top) you can control your main s-grid container height. The width of the container should be dynamic or you can set 'overflow-x: auto' on it. Remember that with this grid type you should control cells width too. Only height and amount of the cells in column will be adjusted based on helper clasess here
Grid direction example 1:
Stylus code:
.my-custom-class-for-grid4
grid(direction: 'column')
.my-custom-class-for-grid-cell4
cell(1, 1)
width rem-calc(250)
+above(rem-calc(breakpoints[md]))
cell(1, 2)
+above(rem-calc(breakpoints[lg]))
cell(1, 3)
HTML code:
<div class="my-custom-class-for-grid4">
<div class="my-custom-class-for-grid-cell4">
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell4">
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quae sint sapiente distinctio error molestias officiis tenetur porro perferendis doloribus!
</div>
<div class="my-custom-class-for-grid-cell4">
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, perspiciatis!
</div>
<div class="my-custom-class-for-grid-cell4">
4 Lorem ipsum dolor sit.
</div>
<div class="my-custom-class-for-grid-cell4">
5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, architecto.
</div>
<div class="my-custom-class-for-grid-cell4">
6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci minus laboriosam nisi vero, est dignissimos.
</div>
<div class="my-custom-class-for-grid-cell4">
7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="my-custom-class-for-grid-cell4">
8 Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
Grid direction example 2:
Stylus code:
.my-custom-class-for-grid5
grid(direction: 'row-reverse')
.my-custom-class-for-grid-cell5
cell(1, 1)
width rem-calc(250)
+above(rem-calc(breakpoints[md]))
cell(1, 2)
+above(rem-calc(breakpoints[lg]))
cell(1, 3)
HTML code:
<div class="my-custom-class-for-grid5">
<div class="my-custom-class-for-grid-cell5">
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="my-custom-class-for-grid-cell5">
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quae sint sapiente distinctio error molestias officiis tenetur porro perferendis doloribus!
</div>
<div class="my-custom-class-for-grid-cell5">
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, perspiciatis!
</div>
<div class="my-custom-class-for-grid-cell5">
4 Lorem ipsum dolor sit.
</div>
<div class="my-custom-class-for-grid-cell5">
5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, architecto.
</div>
<div class="my-custom-class-for-grid-cell5">
6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci minus laboriosam nisi vero, est dignissimos.
</div>
<div class="my-custom-class-for-grid-cell5">
7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="my-custom-class-for-grid-cell5">
8 Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
You can change the direction of the grid cells. To do so, just add one more class:
If you use the column direction (top to bottom or bottom to top) you can control your main s-grid container height. The width of the container should be dynamic or you can set 'overflow-x: auto' on it. Remember that with this grid type you should control cells width too. Only height and amount of the cells in column will be adjusted based on helper clasess here.
Grid direction example 1:
HTML code:
<div style="height: 500px; overflow-x: auto;" class="s-grid-top s-grid-column s-grid-sm-12 s-grid-md-6 s-grid-lg-4">
<div class="s-grid-cell" style="width: 250px;">
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="s-grid-cell" style="width: 250px;">
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quae sint sapiente distinctio error molestias officiis tenetur porro perferendis doloribus!
</div>
<div class="s-grid-cell" style="width: 250px;">
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, perspiciatis!
</div>
<div class="s-grid-cell" style="width: 250px;">
4 Lorem ipsum dolor sit.
</div>
<div class="s-grid-cell" style="width: 250px;">
5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, architecto.
</div>
<div class="s-grid-cell" style="width: 250px;">
6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci minus laboriosam nisi vero, est dignissimos.
</div>
<div class="s-grid-cell" style="width: 250px;">
7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="s-grid-cell" style="width: 250px;">
8 Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
Grid direction example 2:
HTML code:
<div class="s-grid-top s-grid-row-reverse s-grid-sm-12 s-grid-md-6 s-grid-lg-4">
<div class="s-grid-cell">
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="s-grid-cell">
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quae sint sapiente distinctio error molestias officiis tenetur porro perferendis doloribus!
</div>
<div class="s-grid-cell">
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, perspiciatis!
</div>
<div class="s-grid-cell">
4 Lorem ipsum dolor sit.
</div>
<div class="s-grid-cell">
5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, architecto.
</div>
<div class="s-grid-cell">
6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci minus laboriosam nisi vero, est dignissimos.
</div>
<div class="s-grid-cell">
7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
<div class="s-grid-cell">
8 Lorem ipsum dolor sit amet.
</div>
</div>
Effect:
You can use standard Flexbox order features. Example:
Stylus:
.item
order 1
.my-special-item
order 0
HTML code:
<div class="s-grid-top s-grid-justify-center">
<div class="s-grid-cell s-grid-cell-sm-3 item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, doloribus!
</div>
<div class="s-grid-cell s-grid-cell-sm-3 item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae!
</div>
<div class="s-grid-cell s-grid-cell-sm-3 my-special-item">
It should be first!
</div>
<div class="s-grid-cell s-grid-cell-sm-3 item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus!
</div>
</div>
So my-special-item element should be first now.
Effect: