diff --git a/css/mini-full.css b/css/mini-full.css
index 5c3ac03..fb350e1 100644
--- a/css/mini-full.css
+++ b/css/mini-full.css
@@ -266,3 +266,124 @@ textarea {
.btn.btn-sm {
padding: 4px 8px;
font-size: 80%; }
+
+.grid-container * {
+ box-sizing: border-box; }
+
+.row:before, .row:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.col {
+ float: left;
+ padding: 12px; }
+
+.xs-3-1 {
+ width: 33.33333%; }
+
+.xs-3-2 {
+ width: 66.66667%; }
+
+.xs-3-3 {
+ width: 100%; }
+
+.xs-4-1 {
+ width: 25%; }
+
+.xs-4-2 {
+ width: 50%; }
+
+.xs-4-3 {
+ width: 75%; }
+
+.xs-4-4 {
+ width: 100%; }
+
+.xs-no {
+ display: none; }
+
+.sm-no, .md-no, .lg-no {
+ display: block; }
+
+@media (min-width: 768px) {
+ .sm-3-1 {
+ width: 33.33333%; }
+
+ .sm-3-2 {
+ width: 66.66667%; }
+
+ .sm-3-3 {
+ width: 100%; }
+
+ .sm-4-1 {
+ width: 25%; }
+
+ .sm-4-2 {
+ width: 50%; }
+
+ .sm-4-3 {
+ width: 75%; }
+
+ .sm-4-4 {
+ width: 100%; }
+
+ .sm-no {
+ display: none; }
+
+ .xs-no, .md-no, .lg-no {
+ display: block; } }
+@media (min-width: 1024px) {
+ .md-3-1 {
+ width: 33.33333%; }
+
+ .md-3-2 {
+ width: 66.66667%; }
+
+ .md-3-3 {
+ width: 100%; }
+
+ .md-4-1 {
+ width: 25%; }
+
+ .md-4-2 {
+ width: 50%; }
+
+ .md-4-3 {
+ width: 75%; }
+
+ .md-4-4 {
+ width: 100%; }
+
+ .md-no {
+ display: none; }
+
+ .xs-no, .sm-no, .lg-no {
+ display: block; } }
+@media (min-width: 1280px) {
+ .lg-3-1 {
+ width: 33.33333%; }
+
+ .lg-3-2 {
+ width: 66.66667%; }
+
+ .lg-3-3 {
+ width: 100%; }
+
+ .lg-4-1 {
+ width: 25%; }
+
+ .lg-4-2 {
+ width: 50%; }
+
+ .lg-4-3 {
+ width: 75%; }
+
+ .lg-4-4 {
+ width: 100%; }
+
+ .lg-no {
+ display: none; }
+
+ .xs-no, .sm-no, .md-no {
+ display: block; } }
diff --git a/css/mini-full.min.css b/css/mini-full.min.css
index 95b2430..e87cfa8 100644
--- a/css/mini-full.min.css
+++ b/css/mini-full.min.css
@@ -1 +1 @@
-html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%}
\ No newline at end of file
+html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#eee}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1,h2,h3,h4,h5,h6,hr{line-height:1.3;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,hr small{color:#484848;font-weight:200}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.8em}h6{font-size:.7em}small{font-size:75%}p,pre{margin:0 0 .6em}ol,ul{margin-top:0;margin-bottom:.6em}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}hr{box-sizing:content-box;height:0;border:0;border-top:1px solid #c8c8c8}code,kbd,pre,samp{font-family:monospace;font-size:1em}code,pre{padding:2px 4px;background-color:#d8d8d8;border-radius:4px}kbd{padding:2px 4px;color:#eee;background-color:#2b2b2b;border-radius:4px}pre{display:block;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#2678b3}a:active,a:hover{outline-width:0;color:#3793d5}a:visited{color:#1d5c89}a:visited:active,a:visited:hover{color:#2678b3}figure{margin:1em 40px}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff3;color:#222}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.hidden,[hidden],template{display:none}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:100%;line-height:1.3;margin:0}button,hr,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner,html [type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring,html [type=button]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c8c8c8;border-radius:4px;margin:0 2px;padding:.35em .65em .75em}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.btn{border-radius:4px;cursor:pointer;display:inline-block;margin:2px 0;padding:6px 12px;color:#2a2a2a;background:#dbdbdb;border:1px solid #b9b9b9}.btn:active,.btn:focus,.btn:hover{background:#c2c2c2;border-color:#a0a0a0}.btn.disabled,.btn[disabled],.btnfieldset[disabled]{cursor:not-allowed;opacity:.65}.btn.btn-b{color:#eee;background:#3370bb;border:1px solid #2d70af}.btn.btn-b:active,.btn.btn-b:focus,.btn.btn-b:hover{background:#285893;border-color:#235686}.btn.btn-g{color:#eee;background:#4caf50;border:1px solid #3cb941}.btn.btn-g:active,.btn.btn-g:focus,.btn.btn-g:hover{background:#3d8b40;border-color:#309233}.btn.btn-c{color:#eee;background:#38a6e8;border:1px solid #2dbdde}.btn.btn-c:active,.btn.btn-c:focus,.btn.btn-c:hover{background:#198ed4;border-color:#1d9dbb}.btn.btn-y{color:#eee;background:#edc637;border:1px solid #d1bc24}.btn.btn-y:active,.btn.btn-y:focus,.btn.btn-y:hover{background:#ddb214;border-color:#a5951d}.btn.btn-r{color:#eee;background:#be2e2a;border:1px solid #ae342f}.btn.btn-r:active,.btn.btn-r:focus,.btn.btn-r:hover{background:#942421;border-color:#862824}.btn.btn-lg{padding:9px 15px;font-size:135%}.btn.btn-sm{padding:4px 8px;font-size:80%}.grid-container *{box-sizing:border-box}.row:after,.row:before{content:"";display:table;clear:both}.col{float:left;padding:12px}.xs-3-1{width:33.33333%}.xs-3-2{width:66.66667%}.xs-3-3{width:100%}.xs-4-1{width:25%}.xs-4-2{width:50%}.xs-4-3{width:75%}.xs-4-4{width:100%}.xs-no{display:none}.lg-no,.md-no,.sm-no{display:block}@media (min-width:768px){.sm-3-1{width:33.33333%}.sm-3-2{width:66.66667%}.sm-3-3{width:100%}.sm-4-1{width:25%}.sm-4-2{width:50%}.sm-4-3{width:75%}.sm-4-4{width:100%}.sm-no{display:none}.lg-no,.md-no,.xs-no{display:block}}@media (min-width:1024px){.md-3-1{width:33.33333%}.md-3-2{width:66.66667%}.md-3-3{width:100%}.md-4-1{width:25%}.md-4-2{width:50%}.md-4-3{width:75%}.md-4-4{width:100%}.md-no{display:none}.lg-no,.sm-no,.xs-no{display:block}}@media (min-width:1280px){.lg-3-1{width:33.33333%}.lg-3-2{width:66.66667%}.lg-3-3{width:100%}.lg-4-1{width:25%}.lg-4-2{width:50%}.lg-4-3{width:75%}.lg-4-4{width:100%}.lg-no{display:none}.md-no,.sm-no,.xs-no{display:block}}
\ No newline at end of file
diff --git a/scss/mini-full.scss b/scss/mini-full.scss
index cd48094..41e1647 100644
--- a/scss/mini-full.scss
+++ b/scss/mini-full.scss
@@ -1,3 +1,4 @@
@import 'mini/variables';
@import 'mini/base';
-@import 'mini/button';
\ No newline at end of file
+@import 'mini/button';
+@import 'mini/grid';
\ No newline at end of file
diff --git a/scss/mini/_grid.scss b/scss/mini/_grid.scss
new file mode 100644
index 0000000..ed1cc20
--- /dev/null
+++ b/scss/mini/_grid.scss
@@ -0,0 +1,140 @@
+.grid-container *{
+ box-sizing: border-box;
+}
+
+.row:before, .row:after {
+ content:"";
+ display: table ;
+ clear:both;
+}
+
+.col{
+ float: left;
+ padding: 12px;
+}
+
+.xs-3-1{
+ width: (100% / 3);
+}
+.xs-3-2{
+ width: 2 * (100% / 3);
+}
+.xs-3-3{
+ width: 3 * (100% / 3);
+}
+
+.xs-4-1{
+ width: (100% / 4);
+}
+.xs-4-2{
+ width: 2 * (100% / 4);
+}
+.xs-4-3{
+ width: 3 * (100% / 4);
+}
+.xs-4-4{
+ width: 4 * (100% / 4);
+}
+
+.xs-no{
+ display: none;
+}
+.sm-no, .md-no, .lg-no{
+ display: block;
+}
+
+@media (min-width: 768px){
+ .sm-3-1{
+ width: (100% / 3);
+ }
+ .sm-3-2{
+ width: 2 * (100% / 3);
+ }
+ .sm-3-3{
+ width: 3 * (100% / 3);
+ }
+
+ .sm-4-1{
+ width: (100% / 4);
+ }
+ .sm-4-2{
+ width: 2 * (100% / 4);
+ }
+ .sm-4-3{
+ width: 3 * (100% / 4);
+ }
+ .sm-4-4{
+ width: 4 * (100% / 4);
+ }
+
+ .sm-no{
+ display: none;
+ }
+ .xs-no, .md-no, .lg-no{
+ display: block;
+ }
+}
+
+@media (min-width: 1024px){
+ .md-3-1{
+ width: (100% / 3);
+ }
+ .md-3-2{
+ width: 2 * (100% / 3);
+ }
+ .md-3-3{
+ width: 3 * (100% / 3);
+ }
+
+ .md-4-1{
+ width: (100% / 4);
+ }
+ .md-4-2{
+ width: 2 * (100% / 4);
+ }
+ .md-4-3{
+ width: 3 * (100% / 4);
+ }
+ .md-4-4{
+ width: 4 * (100% / 4);
+ }
+
+ .md-no{
+ display: none;
+ }
+ .xs-no, .sm-no, .lg-no{
+ display: block;
+ }
+}
+
+@media (min-width: 1280px){
+ .lg-3-1{
+ width: (100% / 3);
+ }
+ .lg-3-2{
+ width: 2 * (100% / 3);
+ }
+ .lg-3-3{
+ width: 3 * (100% / 3);
+ }
+
+ .lg-4-1{
+ width: (100% / 4);
+ }
+ .lg-4-2{
+ width: 2 * (100% / 4);
+ }
+ .lg-4-3{
+ width: 3 * (100% / 4);
+ }
+ .lg-4-4{
+ width: 4 * (100% / 4);
+ }
+
+ .lg-no{
+ display: none;
+ }
+ .xs-no, .sm-no, .md-no{
+ display: block;
+ }
+}
\ No newline at end of file
diff --git a/testpage.html b/testpage.html
index c29b1ec..fff10ce 100644
--- a/testpage.html
+++ b/testpage.html
@@ -61,5 +61,6 @@ Suspendisse varius turpis et dui viverra semper.
Nam non diam ante. Curabitur non enim vitae eros luctus porta.
+