From fcae4371e6e204d6cd7f00fce8f18f3065ee12fc Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 25 Jul 2018 17:53:42 -0600
Subject: [PATCH] Make basic grid layout

---
 public/reset.css |  2 +-
 src/Grid.css     | 51 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/Grid.js      | 18 +++++++++++++++++
 src/Home.js      |  3 +++
 4 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/Grid.css
 create mode 100644 src/Grid.js

diff --git a/public/reset.css b/public/reset.css
index af94440..e29c0f5 100644
--- a/public/reset.css
+++ b/public/reset.css
@@ -45,4 +45,4 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
\ No newline at end of file
+}
diff --git a/src/Grid.css b/src/Grid.css
new file mode 100644
index 0000000..e526918
--- /dev/null
+++ b/src/Grid.css
@@ -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%;
+	}
+}
diff --git a/src/Grid.js b/src/Grid.js
new file mode 100644
index 0000000..0a1bf60
--- /dev/null
+++ b/src/Grid.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import './Grid.css';
+
+class Grid extends React.Component {
+	render() {
+		return (
+			<div className='grid-container'>
+				<div className='grid-item'>test</div>
+				<div className='grid-item'>test</div>
+				<div className='grid-item'>test</div>
+				<div className='grid-item'>test</div>
+				<div className='grid-item'>test</div>
+			</div>
+		);
+	}
+}
+
+export default Grid;
diff --git a/src/Home.js b/src/Home.js
index 25fbc96..5d7517c 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import './Home.css';
 
+import Grid from './Grid';
+
 class Home extends React.Component {
 	render() {
 		return (
 			<div className='Home'>
 				Hello world!
+				<Grid />
 			</div>
 		);
 	}