Make basic grid layout

public/reset.css

@@ -45,4 +45,4 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
+}

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%;
+	}
+}

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;

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>
 		);
 	}