Make basic grid layout

This commit is contained in:
Tanner Collin 2018-07-25 17:53:42 -06:00
parent a8e9724cde
commit fcae4371e6
4 changed files with 73 additions and 1 deletions

View File

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

51
src/Grid.css Normal file
View File

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

18
src/Grid.js Normal file
View File

@ -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;

View File

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