Make basic grid layout

2018-07-25 17:53:42 -06:00
parent a8e9724cde
commit fcae4371e6
4 changed files with 73 additions and 1 deletions
@@ -0,0 +1,51 @@
+.grid-container {
+	background: #bad4ff;
+	max-width: 120rem;
+	margin: 0 auto;
+}
+
+.grid-item {
+	background: #baffbd;
+
+	float: left;
+
+	width: 30rem;
+	padding-bottom: 30rem;
+
+	//border-style: solid;
+	//border-width: 5px;
+}
+
+@media all and (max-width: 120rem) {
+	.grid-item {
+		width: 25%;
+		padding-bottom: 25%
+	}
+}
+
+@media all and (max-width: 102rem) {
+	.grid-item {
+		width: 33.33%;
+		padding-bottom: 33.33%;
+	}
+}
+
+@media all and (max-width: 76.5rem) {
+	.grid-container {
+		max-width: 68rem;
+	}
+	.grid-item {
+		width: 50%;
+		padding-bottom: 50%;
+	}
+}
+
+@media all and (max-width: 51rem) {
+	.grid-container {
+		max-width: 34rem;;
+	}
+	.grid-item {
+		width: 100%;
+		padding-bottom: 100%;
+	}
+}