diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 365b48b7c..e198d2b44 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -25,40 +25,40 @@ var Grid = React.createClass({
);
return (
-
- {this.props.items.map(function (item) {
- var href = '/' + this.props.itemType + '/' + item.id + '/';
+
+ {this.props.items.map(function (item) {
+ var href = '/' + this.props.itemType + '/' + item.id + '/';
- if (this.props.itemType == 'projects') {
- return (
-
- );
- }
- else {
- return (
-
- );
- }
- }.bind(this))}
-
+ if (this.props.itemType == 'projects') {
+ return (
+
+ );
+ }
+ else {
+ return (
+
+ );
+ }
+ }.bind(this))}
+
);
}
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 2ae47c418..1f72e99d5 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -2,16 +2,25 @@
.grid {
display: inline-block;
- padding: 12px;
- justify-content: space-around;
- align-items: center;
+ width: 100%;
+
+ $project-width: 200px;
+ $project-height: 150px;
+
+ $gallery-width: 200px;
+ $gallery-height: 118px;
+
+ .flex-row {
+ margin: 0 auto;
+ padding: 12px;
+ width: (96px + (4 * $project-width)) / $em;
+ justify-content: flex-start;
+ }
.thumbnail {
padding: 12px;
&.project {
- $project-width: 200px;
- $project-height: 150px;
width: $project-width;
img {
@@ -21,8 +30,6 @@
}
&.gallery {
- $gallery-width: 200px;
- $gallery-height: 118px;
width: $gallery-width;
img {
@@ -40,4 +47,12 @@
@media only screen and (max-width: $tablet - 1) {
flex-direction: column;
}
+
+ @media only screen and (max-width: $desktop - 1) {
+ .flex-row {
+ padding: 12px 0;
+ width: 100%;
+ justify-content: space-around;
+ }
+ }
}