diff --git a/dist/index.html b/dist/index.html
index 9ba5b47..eb87663 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="plain-ui.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
 </head>
+
 <body class="overflow-x-hidden">
 
     <header id="header" class="header">
@@ -297,7 +298,7 @@
     </div>
 
     <div class="hero">
-        <img style="max-height: 400px;"  src="https://picsum.photos/seed/picsum/1200/600" />
+        <img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" />
     </div>
 
     <div class="container">
@@ -308,9 +309,9 @@
             <div class="col-12">
                 <figure class="figure">
                     <img class="media" src="https://via.placeholder.com/150" />
-                     <figcaption class="figure__caption">
-                         food truck yr franzen pabst
-                     </figcaption>
+                    <figcaption class="figure__caption">
+                        food truck yr franzen pabst
+                    </figcaption>
                 </figure>
             </div>
         </div>
@@ -330,12 +331,12 @@
     <div class="slider">
         <div class="slider__inner">
             <div class="slider__item">
-            <figure class="figure">
-                <img class="media" src="https://via.placeholder.com/600/200" />
-                <figcaption class="figure__caption">
-                    food truck yr franzen pabst
-                </figcaption>
-            </figure>
+                <figure class="figure">
+                    <img class="media" src="https://via.placeholder.com/600/200" />
+                    <figcaption class="figure__caption">
+                        food truck yr franzen pabst
+                    </figcaption>
+                </figure>
             </div>
             <div class="slider__item">
                 <figure class="figure">
@@ -379,53 +380,27 @@
             </div>
             <div class="col-12">
                 <div class="masonry">
-                    <div class="masonry__item">
-
-                    </div>
-                    <div class="masonry__item">
-                        <figure class="figure">
-                            <img class="media" src="https://via.placeholder.com/400/600" />
-                            <figcaption class="figure__caption">
-                                food truck yr franzen pabst
-                            </figcaption>
-                        </figure>
-                    </div>
-                    <div class="masonry__item">
-                        <figure class="figure">
-                            <img class="media" src="https://via.placeholder.com/800/400" />
-                            <figcaption class="figure__caption">
-                                food truck yr franzen pabst
-                            </figcaption>
-                        </figure>
-                    </div>
-                    <div class="masonry__item">
-                        <figure class="figure">
-                            <img class="media" src="https://via.placeholder.com/600/400" />
-                            <figcaption class="figure__caption">
-                                food truck yr franzen pabst
-                            </figcaption>
-                        </figure>
-                    </div>
-                    <div class="masonry__item">
-                        <figure class="figure">
-                            <img class="media" src="https://via.placeholder.com/400/600" />
-                            <figcaption class="figure__caption">
-                                food truck yr franzen pabst
-                            </figcaption>
-                        </figure>
-                    </div>
-                    <div class="masonry__item">
-                        <figure class="figure">
-                            <img class="media" src="https://via.placeholder.com/800/400" />
-                            <figcaption class="figure__caption">
-                                food truck yr franzen pabst
-                            </figcaption>
-                        </figure>
-                    </div>
+                    <figure class="masonry__item marginless">
+                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
+                    </figure>
+                    <figure class="masonry__item marginless">
+                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
+                    </figure>
+                    <figure class="masonry__item marginless">
+                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/600/400" />
+                    </figure>
+                    <figure class="masonry__item marginless">
+                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
+                    </figure>
+                    <figure class="masonry__item marginless">
+                        <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
+                    </figure>
                 </div>
             </div>
         </div>
     </div>
+    </div>
 
 </body>
+
 </html
\ No newline at end of file
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index e7fd776..0d49536 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -468,6 +468,12 @@ h6, .h6 {
  *
  *
  */
+/**
+ *
+ *
+ *
+ *
+ */
 a {
   color: #fff;
 }
@@ -702,6 +708,14 @@ body {
   vertical-align: baseline;
 }
 
+.marginless {
+  margin: 0 !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
 /**
  *
  *
@@ -714,6 +728,11 @@ body {
   overflow-y: hidden;
 }
 
+.object-fit-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .badge {
   display: inline-block;
   background-color: #3e3e3e;
@@ -1129,3 +1148,35 @@ img.media {
 .tabs__item:last-child {
   border-bottom-width: 1px;
 }
+
+.masonry {
+  display: flex;
+  width: 100%;
+  flex-flow: row wrap;
+}
+.masonry__item {
+  height: 200px;
+  padding-left: 1px;
+  padding-bottom: 1px;
+  width: 100%;
+}
+@media only screen and (min-width: 768px) {
+  .masonry__item {
+    height: 300px;
+  }
+  .masonry__item:nth-child(4n+1) {
+    width: 25%;
+  }
+  .masonry__item:nth-child(4n+2) {
+    width: 55%;
+  }
+  .masonry__item:nth-child(4n+3) {
+    width: 20%;
+  }
+  .masonry__item:nth-child(4n+4) {
+    width: 67%;
+  }
+  .masonry__item:nth-child(4n+5) {
+    width: 33%;
+  }
+}
diff --git a/src/scss/core/helpers/_core.scss b/src/scss/core/helpers/_core.scss
index e5eb25f..4d50e3e 100644
--- a/src/scss/core/helpers/_core.scss
+++ b/src/scss/core/helpers/_core.scss
@@ -199,6 +199,14 @@
         vertical-align: baseline;
     }
 
+    .marginless {
+        margin: 0 !important;
+    }
+
+    .h-100 {
+        height: 100% !important;
+    }
+
     /**
      *
      *
@@ -211,4 +219,8 @@
     .overflow-y-hidden {
         overflow-y: hidden;
     }
+
+    .object-fit-cover {
+        object-fit: cover;
+    }
 }
\ No newline at end of file
diff --git a/src/scss/layout/_masonary.scss b/src/scss/layout/_masonary.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/scss/layout/_masonry.scss b/src/scss/layout/_masonry.scss
new file mode 100644
index 0000000..b4ab861
--- /dev/null
+++ b/src/scss/layout/_masonry.scss
@@ -0,0 +1,44 @@
+/**
+ *
+ *
+ *
+ *
+ */
+@mixin plain-ui__layout__masonry() {
+    .masonry {
+        display: flex;
+        width: 100%;
+        flex-flow: row wrap;
+
+        &__item {
+            height: 200px;
+            padding-left: 1px;
+            padding-bottom: 1px;
+            width: 100%;
+
+            @include plain-ui__media-sm() {
+                height: 300px;
+
+                &:nth-child(4n+1) {
+                    width: 25%;
+                }
+
+                &:nth-child(4n+2) {
+                    width: 55%;
+                }
+
+                &:nth-child(4n+3) {
+                    width: 20%;
+                }
+
+                &:nth-child(4n+4) {
+                    width: 67%;
+                }
+
+                &:nth-child(4n+5) {
+                    width: 33%;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss
index 9772dce..9cb8b5f 100644
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@@ -19,7 +19,9 @@
     'components/media',
     'components/table',
     'components/slider',
-    'components/bar';
+    'components/bar',
+
+    'layout/masonry';
 
 @include plain-ui__core();
 @include plain-ui__helpers__core();
@@ -37,4 +39,6 @@
 @include plain-ui__component__hero();
 @include plain-ui__component__slider();
 @include plain-ui__component__bar();
-@include plain-ui__component__tabs();
\ No newline at end of file
+@include plain-ui__component__tabs();
+
+@include plain-ui__layout__masonry();
\ No newline at end of file
