Implement grid

Author: scriptex

assets/objects/_grid.css

@@ -8,26 +8,22 @@
 	padding: 0 var(--gap);
 }
 
-.o-grid__item--1of2 {
-	flex: 0 0 50%;
+@media (--xs) {
+	@mixin grid xs;
 }
 
-.o-grid__item--1of4 {
-	flex: 0 0 25%;
+@media (--sm) {
+	@mixin grid sm;
 }
 
-.o-grid__item--1of3 {
-	flex: 0 0 calc(100% / 3);
+@media (--md) {
+	@mixin grid md;
 }
 
-.o-grid__item--2of3 {
-	flex: 0 0 66.66667%;
+@media (--lg) {
+	@mixin grid lg;
 }
 
-.o-grid__item--1of5 {
-	flex: 0 0 20%;
-}
-
-.o-grid__item--1of6 {
-	flex: 0 0 calc(100% / 6);
+@media (--xl) {
+	@mixin grid xl;
 }

assets/tools/_mixins.css

@@ -7,13 +7,13 @@
 	margin: auto;
 }
 
-@define-mixin breakpoint-helpers $bp {
-	.hidden-$(bp) {
+@define-mixin breakpoint-helpers $breakpoint {
+	.hidden-$(breakpoint) {
 		display: none !important;
 	}
 
 	@each $display in var(--displays) {
-		.visible-$(bp)-$(display) {
+		.visible-$(breakpoint)-$(display) {
 			display: $(display) !important;
 		}
 	}
@@ -23,6 +23,15 @@
 	display: $value !important;
 }
 
+@define-mixin grid $breakpoint {
+	@for $i from 1 to 12 {
+		.$(breakpoint)-$i {
+			max-width: calc($i / 12 * 100%);
+			flex: 0 0 calc($i / 12 * 100%);
+		}
+	}
+}
+
 @define-extend display-none {
 	display: none !important;
 }