Add grid item margins and sample text

src/App.css

@@ -1,3 +1,7 @@
+* {
+	box-sizing: border-box;
+}
+
 body {
 	font-family: sans-serif;
 }

src/Grid.css

@@ -5,15 +5,22 @@
 }
 
 .grid-item {
-	background: #baffbd;
+	background: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
+	position: relative;
 
 	float: left;
 
 	width: 30rem;
+	min-width: 25rem;
+	min-height: 25rem;
 	padding-bottom: 30rem;
+}
 
-	//border-style: solid;
+.grid-item-content {
-	//border-width: 5px;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	padding: 1rem;
 }
 
 @media all and (max-width: 120rem) {

src/Grid.js

@@ -1,15 +1,33 @@
 import React from 'react';
 import './Grid.css';
 
+import logo from './logo.png';
+import GridItem from './GridItem';
+
 class Grid extends React.Component {
 	render() {
 		return (
 			<div className='grid-container'>
-				<div className='grid-item'>test</div>
+				<GridItem>
-				<div className='grid-item'>test</div>
+					<img src={logo} className="Home-logo" alt="logo" />
-				<div className='grid-item'>test</div>
+					<p>Links</p>
-				<div className='grid-item'>test</div>
+					<p>Links</p>
-				<div className='grid-item'>test</div>
+					<p>Links</p>
+					<p>Links</p>
+					<p>Links</p>
+				</GridItem>
+				<GridItem>
+					<h1>Project 1</h1>
+				</GridItem>
+				<GridItem>
+					<h1>Project 2</h1>
+				</GridItem>
+				<GridItem>
+					<h1>Project 3</h1>
+				</GridItem>
+				<GridItem>
+					<h1>Project 4</h1>
+				</GridItem>
 			</div>
 		);
 	}

src/GridItem.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+class GridItem extends React.Component {
+	render() {
+		return (
+			<div className='grid-item'>
+				<div className='grid-item-content'>
+					{this.props.children}
+				</div>
+			</div>
+		);
+	}
+}
+
+export default GridItem;

src/Home.js

@@ -7,7 +7,6 @@ class Home extends React.Component {
 	render() {
 		return (
 			<div className='Home'>
-				Hello world!
 				<Grid />
 			</div>
 		);