Start by adding an element with a class of .grid. This will create a horizontal block to contain vertical columns. Then add elements with a .grid__col class within that row. Specify the widths of each column with .grid__col--xs-#, .grid__col--sm-#, .grid__col--md-# and .grid__col--lg-# classes. Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Bare in mind that the layout is mobile-first. You can stack modifiers if you want to achieve different alignment depending on screen size.
<div class="grid ">
<div class="grid__col grid__col--xs-2 grid__col--md-6">
<div class="sg-box">2/4 xs, 6/12 md</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--md-6">
<div class="sg-box">2/4 xs, 6/12 md</div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--md-4">
<div class="sg-box">1/4 xs, 4/12 md</div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--md-4">
<div class="sg-box">1/4 xs, 4/12 md</div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--md-4">
<div class="sg-box">1/4 xs, 4/12 md</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--md-6 grid__col--lg-3">
<div class="sg-box">2/4 xs, 6/12 md, 3/12 lg</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--md-6 grid__col--lg-3">
<div class="sg-box">2/4 xs, 6/12 md, 3/12 lg</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--md-6 grid__col--lg-3">
<div class="sg-box">2/4 xs, 6/12 md, 3/12 lg</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--md-6 grid__col--lg-3">
<div class="sg-box">2/4 xs, 6/12 md, 3/12 lg</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"columns": [
{
"class": "grid__col--xs-2 grid__col--md-6",
"text": "2/4 xs, 6/12 md"
},
{
"class": "grid__col--xs-2 grid__col--md-6",
"text": "2/4 xs, 6/12 md"
},
{
"class": "grid__col--xs-1 grid__col--md-4",
"text": "1/4 xs, 4/12 md"
},
{
"class": "grid__col--xs-1 grid__col--md-4",
"text": "1/4 xs, 4/12 md"
},
{
"class": "grid__col--xs-1 grid__col--md-4",
"text": "1/4 xs, 4/12 md"
},
{
"class": "grid__col--xs-2 grid__col--md-6 grid__col--lg-3",
"text": "2/4 xs, 6/12 md, 3/12 lg"
},
{
"class": "grid__col--xs-2 grid__col--md-6 grid__col--lg-3",
"text": "2/4 xs, 6/12 md, 3/12 lg"
},
{
"class": "grid__col--xs-2 grid__col--md-6 grid__col--lg-3",
"text": "2/4 xs, 6/12 md, 3/12 lg"
},
{
"class": "grid__col--xs-2 grid__col--md-6 grid__col--lg-3",
"text": "2/4 xs, 6/12 md, 3/12 lg"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Vertical alignment can be either adjusted separately column by column using grid__col--top-#, grid__col--middle-#, grid__col--bottom-# (example below) or by whole group of columns by using grid modifier .grid--top-#, .grid--middle-#, .grid--bottom-#.
<div class="grid sg-h150">
<div class="grid__col grid__col--xs-1 grid__col--md-4 grid__col--top-xs">
<div class="sg-box">top</div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--md-4 grid__col--middle-xs">
<div class="sg-box">middle</div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--md-4 grid__col--bottom-xs">
<div class="sg-box">bottom</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"class": "sg-h150",
"columns": [
{
"class": "grid__col--xs-1 grid__col--md-4 grid__col--top-xs",
"text": "top"
},
{
"class": "grid__col--xs-1 grid__col--md-4 grid__col--middle-xs",
"text": "middle"
},
{
"class": "grid__col--xs-1 grid__col--md-4 grid__col--bottom-xs",
"text": "bottom"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Horizontal alignment can be adjusted by whole group of columns using grid modifier .grid--start-#, .grid--center-#, .grid--end-#.
<div class="grid grid--center-xs ">
<div class="grid__col grid__col--xs-1 grid__col--md-2">
<div class="sg-box">center</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--md-12">
<div class="sg-box">center</div>
</div>
<div class="grid__col grid__col--xs-3 grid__col--md-3">
<div class="sg-box">center</div>
</div>
<div class="grid__col grid__col--xs-3 grid__col--md-3">
<div class="sg-box">center</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"modifier": "grid--center-xs",
"columns": [
{
"class": "grid__col--xs-1 grid__col--md-2",
"text": "center"
},
{
"class": "grid__col--xs-4 grid__col--md-12",
"text": "center"
},
{
"class": "grid__col--xs-3 grid__col--md-3",
"text": "center"
},
{
"class": "grid__col--xs-3 grid__col--md-3",
"text": "center"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Make grid colums with equal height by using grid modifier .grid--equalheight.
<div class="grid grid--equalheight ">
<div class="grid__col grid__col--xs-2 grid__col--md-6">
<div class="sg-box">short column</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-6">
<div class="sg-box">long column lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci.</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"modifier": "grid--equalheight",
"columns": [
{
"class": "grid__col--xs-2 grid__col--md-6",
"text": "short column"
},
{
"class": "grid__col--xs-2 grid__col--sm-6",
"text": "long column lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci."
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Divide the space between (.grid--between-#, example below) or around (grid--around-#) columns.
<div class="grid grid--between-xs ">
<div class="grid__col grid__col--xs-1 grid__col--md-3">
<div class="sg-box">column</div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--md-3">
<div class="sg-box">column</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"modifier": "grid--between-xs",
"columns": [
{
"class": "grid__col--xs-1 grid__col--md-3",
"text": "column"
},
{
"class": "grid__col--xs-1 grid__col--md-3",
"text": "column"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Use columns without gutter by using grid modifier .grid--no-gutter.
<div class="grid grid--no-gutter ">
<div class="grid__col grid__col--xs-2 grid__col--md-6">
<div class="sg-box">first column</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--md-6">
<div class="sg-box">second column</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"modifier": "grid--no-gutter",
"columns": [
{
"class": "grid__col--xs-2 grid__col--md-6",
"text": "first column"
},
{
"class": "grid__col--xs-2 grid__col--md-6",
"text": "second column"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Move columns to the right using .grid__col--offset-sm-# classes. These classes increase the left margin of a column by # columns.
<div class="grid ">
<div class="grid__col grid__col--xs-2 grid__col--offset-xs-2 grid__col--md-1 grid__col--offset-md-11">
<div class="sg-box"></div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--offset-xs-2 grid__col--md-2 grid__col--offset-md-10">
<div class="sg-box"></div>
</div>
<div class="grid__col grid__col--xs-3 grid__col--offset-xs-1 grid__col--md-3 grid__col--offset-md-9">
<div class="sg-box"></div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--offset-xs-2 grid__col--md-4 grid__col--offset-md-8">
<div class="sg-box"></div>
</div>
<div class="grid__col grid__col--xs-1 grid__col--offset-xs-3 grid__col--md-5 grid__col--offset-md-7">
<div class="sg-box"></div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--offset-xs-2 grid__col--md-6 grid__col--offset-md-6">
<div class="sg-box"></div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"columns": [
{
"class": "grid__col--xs-2 grid__col--offset-xs-2 grid__col--md-1 grid__col--offset-md-11"
},
{
"class": "grid__col--xs-1 grid__col--offset-xs-2 grid__col--md-2 grid__col--offset-md-10"
},
{
"class": "grid__col--xs-3 grid__col--offset-xs-1 grid__col--md-3 grid__col--offset-md-9"
},
{
"class": "grid__col--xs-2 grid__col--offset-xs-2 grid__col--md-4 grid__col--offset-md-8"
},
{
"class": "grid__col--xs-1 grid__col--offset-xs-3 grid__col--md-5 grid__col--offset-md-7"
},
{
"class": "grid__col--xs-2 grid__col--offset-xs-2 grid__col--md-6 grid__col--offset-md-6"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
You can reverse order by using .grid--reverse-# modifier or control column directly via .grid__col--first-# (example below) or .grid__col--last-#. Reset the order rule by using .grid__col--original-#.
<div class="grid ">
<div class="grid__col grid__col--xs-2 grid__col--sm-6">
<div class="sg-box">first in DOM, but second on screen</div>
</div>
<div class="grid__col grid__col--xs-2 grid__col--sm-6 grid__col--first-md">
<div class="sg-box">second in DOM, but first on screen</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"columns": [
{
"class": "grid__col--xs-2 grid__col--sm-6",
"text": "first in DOM, but second on screen"
},
{
"class": "grid__col--xs-2 grid__col--sm-6 grid__col--first-md",
"text": "second in DOM, but first on screen"
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';
Make grid column min width by using column modifier .grid__col--min or max available space with modifier .grid__col--max.
<div class="grid grid--no-wrap-md ">
<div class="grid__col grid__col--min-md">
<div class="sg-box">icon</div>
</div>
<div class="grid__col grid__col--max-md">
<div class="sg-box">long column lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci.</div>
</div>
</div>
<div class="grid {{ modifier }} {{ class }}">
{% for column in columns %}
<div class="grid__col {{ column.class }}">
<div class="sg-box">{{ column.text }}</div>
</div>
{% endfor %}
</div>
{
"language": "en-US",
"modifier": "grid--no-wrap-md",
"columns": [
{
"class": "grid__col--min-md",
"text": "icon"
},
{
"class": "grid__col--max-md",
"text": "long column lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci."
}
]
}
@use 'sass:math';
@mixin make-grid($name, $columns) {
@for $i from 1 through $columns {
.grid__col--#{$name}-#{$i} {
order: 0;
flex-basis: math.div(100%, $columns) * $i;
max-width: math.div(100%, $columns) * $i;
}
.grid__col--offset-#{$name}-#{$i} {
margin-left: math.div(100%, $columns) * $i;
}
}
.grid__col--#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--min-#{$name} {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max-#{$name} {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--top-#{$name} {
align-self: flex-start;
}
.grid__col--middle-#{$name} {
align-self: center;
}
.grid__col--bottom-#{$name} {
align-self: flex-end;
}
.grid__col--original-#{$name} {
order: 0;
}
.grid__col--first-#{$name} {
order: -1;
}
.grid__col--last-#{$name} {
order: 1;
}
.grid--row-#{$name} {
flex-direction: row;
}
.grid--reverse-#{$name} {
flex-direction: row-reverse;
}
.grid--start-#{$name} {
justify-content: flex-start;
}
.grid--center-#{$name} {
justify-content: center;
}
.grid--end-#{$name} {
justify-content: flex-end;
}
.grid--top-#{$name} {
align-items: flex-start;
}
.grid--middle-#{$name} {
align-items: center;
}
.grid--bottom-#{$name} {
align-items: flex-end;
}
.grid--around-#{$name} {
justify-content: space-around;
}
.grid--between-#{$name} {
justify-content: space-between;
}
.grid--no-wrap-#{$name} {
flex-wrap: nowrap;
}
}
@mixin grid-gutter($name, $gutter-size) {
.grid--gutter-#{$name} {
margin-right: $gutter-size * .5 * -1;
margin-left: $gutter-size * .5 * -1;
margin-bottom: math.div($gutter-size, 3) * -1;
@include bp(lg-min) {
margin-bottom: $gutter-size * -1;
}
}
.grid__col {
.grid--gutter-#{$name} > & {
padding-right: $gutter-size * .5;
padding-left: $gutter-size * .5;
margin-bottom: math.div($gutter-size, 3);
@include bp(lg-min) {
margin-bottom: $gutter-size;
}
}
}
}
.grid {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: $grid-gutter * .5 * -1;
margin-left: $grid-gutter * .5 * -1;
margin-bottom: $grid-gutter * -1;
@include bp(md-min) {
margin-right: $grid-gutter-md * .5 * -1;
margin-left: $grid-gutter-md * .5 * -1;
margin-bottom: $grid-gutter-md * -1;
}
}
.grid--column {
flex-direction: column;
}
@include grid-gutter(medium, $grid-gutter-medium);
@include grid-gutter(large, $grid-gutter-large);
.grid--no-gutter {
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter {
margin-right: 0;
margin-left: 0;
}
.grid--no-vertical-gutter {
margin-bottom: 0;
}
.grid--no-wrap {
flex-wrap: nowrap;
}
.grid__col {
flex: 0 0 auto;
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin-bottom: $grid-gutter;
padding-right: $grid-gutter * .5;
padding-left: $grid-gutter * .5;
@include bp(md-min) {
padding-right: $grid-gutter-md * .5;
padding-left: $grid-gutter-md * .5;
margin-bottom: $grid-gutter-md;
}
.grid--equalheight > & {
display: flex;
}
.grid--no-gutter > & {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.grid--no-horizontal-gutter > & {
padding-left: 0;
padding-right: 0;
}
.grid--no-vertical-gutter > & {
margin-bottom: 0;
}
}
.grid__col--min {
flex-grow: 0;
flex-basis: auto;
width: auto;
max-width: 100%;
}
.grid__col--max {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.grid__col--no-vertical-gutter {
margin-bottom: 0;
}
@include make-grid(xs, $grid-cols);
@include bp(xxs) {
@include make-grid(xxs, $grid-cols);
}
@include bp(sm-min) {
@include make-grid(sm, $grid-cols);
}
@include bp(md-min) {
@include make-grid(md, $grid-cols-md);
}
@include bp(lg-min) {
@include make-grid(lg, $grid-cols-md);
}
@include bp(xl-min) {
@include make-grid(xl, $grid-cols-md);
}
import './grid.scss';