fixup! ADDED: Utility: Grid: Grid will allow to create complex grid l…

…ayout using the CSS classes: 'row, col-(sm/md/lg)-1/12'.

src/css/utilities/grids.css

@@ -0,0 +1,316 @@
+/*
+ * Copyright (c) 2023 SGNetworks. All rights reserved.
+ *
+ * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
+ * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
+ */
+
+/*!
+ * Favorite Grid v.1.0
+ * Author : Ali Norouzi ( https://github.com/anorouzii )
+ * Licensed under MIT ( https://github.com/anorouzii/favorite-grid/blob/master/LICENSE )
+*/
+
+/************* Row *************/
+.row {
+	/*! margin: 0 -15px; */
+	width: 100%;
+	max-width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.row:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+.row [class^="col"] {
+	position: relative;
+	min-height: 1px;
+	padding: 0 15px;
+	float: right;
+}
+
+/************* Default column *************/
+.col-auto {
+	flex: 0 0 auto;
+	width: auto;
+}
+
+.col {
+	flex: 1 0 0;
+}
+
+.col-1 {
+	width: 8.33333%;
+}
+
+.col-2 {
+	width: 16.66667%;
+}
+
+.col-3 {
+	width: 25%;
+}
+
+.col-4 {
+	width: 33.33333%;
+}
+
+.col-5 {
+	width: 41.66667%;
+}
+
+.col-6 {
+	width: 50%;
+}
+
+.col-7 {
+	width: 58.33333%;
+}
+
+.col-8 {
+	width: 66.66667%;
+}
+
+.col-9 {
+	width: 75%;
+}
+
+.col-10 {
+	width: 83.33333%;
+}
+
+.col-11 {
+	width: 91.66667%;
+}
+
+.col-12 {
+	width: 100%;
+}
+
+/************* XLarge Device column *************/
+@media only screen and (min-width: 1200px) {
+	.col-xl-auto {
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	.col-xl-1 {
+		width: 8.33333%;
+	}
+
+	.col-xl-2 {
+		width: 16.66667%;
+	}
+
+	.col-xl-3 {
+		width: 25%;
+	}
+
+	.col-xl-4 {
+		width: 33.33333%;
+	}
+
+	.col-xl-5 {
+		width: 41.66667%;
+	}
+
+	.col-xl-6 {
+		width: 50%;
+	}
+
+	.col-xl-7 {
+		width: 58.33333%;
+	}
+
+	.col-xl-8 {
+		width: 66.66667%;
+	}
+
+	.col-xl-9 {
+		width: 75%;
+	}
+
+	.col-xl-10 {
+		width: 83.33333%;
+	}
+
+	.col-xl-11 {
+		width: 91.66667%;
+	}
+
+	.col-xl-12 {
+		width: 100%;
+	}
+}
+
+/************* Large Device column *************/
+@media only screen and (min-width: 992px) {
+	.col-lg-auto {
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	.col-lg-1 {
+		width: 8.33333%;
+	}
+
+	.col-lg-2 {
+		width: 16.66667%;
+	}
+
+	.col-lg-3 {
+		width: 25%;
+	}
+
+	.col-lg-4 {
+		width: 33.33333%;
+	}
+
+	.col-lg-5 {
+		width: 41.66667%;
+	}
+
+	.col-lg-6 {
+		width: 50%;
+	}
+
+	.col-lg-7 {
+		width: 58.33333%;
+	}
+
+	.col-lg-8 {
+		width: 66.66667%;
+	}
+
+	.col-lg-9 {
+		width: 75%;
+	}
+
+	.col-lg-10 {
+		width: 83.33333%;
+	}
+
+	.col-lg-11 {
+		width: 91.66667%;
+	}
+
+	.col-lg-12 {
+		width: 100%;
+	}
+}
+
+/************* Medium Device column *************/
+@media only screen and (min-width: 768px) {
+	.col-md-auto {
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	.col-md-1 {
+		width: 8.33333%;
+	}
+
+	.col-md-2 {
+		width: 16.66667%;
+	}
+
+	.col-md-3 {
+		width: 25%;
+	}
+
+	.col-md-4 {
+		width: 33.33333%;
+	}
+
+	.col-md-5 {
+		width: 41.66667%;
+	}
+
+	.col-md-6 {
+		width: 50%;
+	}
+
+	.col-md-7 {
+		width: 58.33333%;
+	}
+
+	.col-md-8 {
+		width: 66.66667%;
+	}
+
+	.col-md-9 {
+		width: 75%;
+	}
+
+	.col-md-10 {
+		width: 83.33333%;
+	}
+
+	.col-md-11 {
+		width: 91.66667%;
+	}
+
+	.col-md-12 {
+		width: 100%;
+	}
+}
+
+/************* Small Device column *************/
+@media only screen and (min-width: 480px) {
+	.col-sm-auto {
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	.col-sm-1 {
+		width: 8.33333%;
+	}
+
+	.col-sm-2 {
+		width: 16.66667%;
+	}
+
+	.col-sm-3 {
+		width: 25%;
+	}
+
+	.col-sm-4 {
+		width: 33.33333%;
+	}
+
+	.col-sm-5 {
+		width: 41.66667%;
+	}
+
+	.col-sm-6 {
+		width: 50%;
+	}
+
+	.col-sm-7 {
+		width: 58.33333%;
+	}
+
+	.col-sm-8 {
+		width: 66.66667%;
+	}
+
+	.col-sm-9 {
+		width: 75%;
+	}
+
+	.col-sm-10 {
+		width: 83.33333%;
+	}
+
+	.col-sm-11 {
+		width: 91.66667%;
+	}
+
+	.col-sm-12 {
+		width: 100%;
+	}
+}