From 0482cc69f09db99a8ad244989cc69b9040d64d26 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 21 Sep 2022 13:10:55 +0700
Subject: [PATCH] feat: Masonry grid

---
 contents/_includes/patterns/masonry-grid.njk |  13 +++
 contents/index.njk                           |   1 +
 contents/masonry-grid.md                     |  36 +++++++
 pages/masonry-grid/index.tsx                 | 101 -------------------
 patterns/masonry-grid/Cover.tsx              |  56 ----------
 styles/index.scss                            |   1 +
 styles/patterns/_masonry-grid.scss           |  19 ++++
 7 files changed, 70 insertions(+), 157 deletions(-)
 create mode 100644 contents/_includes/patterns/masonry-grid.njk
 create mode 100644 contents/masonry-grid.md
 delete mode 100644 pages/masonry-grid/index.tsx
 delete mode 100644 patterns/masonry-grid/Cover.tsx
 create mode 100644 styles/patterns/_masonry-grid.scss

diff --git a/contents/_includes/patterns/masonry-grid.njk b/contents/_includes/patterns/masonry-grid.njk
new file mode 100644
index 0000000..b767898
--- /dev/null
+++ b/contents/_includes/patterns/masonry-grid.njk
@@ -0,0 +1,13 @@
+<div class="masonry-grid">
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "md", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "md", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "md", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "md", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="masonry-grid__item">{% rectangle "hor", "sm", 100 %}</div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 216e559..6df3a74 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -111,6 +111,7 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">
             {% pattern "Card layout" %}{% include "patterns/card-layout.njk" %}{% endpattern %}
             {% pattern "Holy grail" %}{% include "patterns/holy-grail.njk" %}{% endpattern %}
+            {% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/masonry-grid.md b/contents/masonry-grid.md
new file mode 100644
index 0000000..75ffa36
--- /dev/null
+++ b/contents/masonry-grid.md
@@ -0,0 +1,36 @@
+---
+layout: layouts/post.njk
+title: Masonry grid
+description: Create a masonry grid with CSS
+keywords: css column-count, css column-gap, css masonry, css masonry grid
+---
+
+## HTML
+
+```html
+<div class="masonry-grid">
+    <!--Item -->
+    <div class="masonry-grid__item">...</div>
+
+    <!-- Repeat other items -->
+</div>
+```
+
+## CSS
+
+```css
+.masonry-grid {
+    /* It is split into 3 columns */
+    column-count: 3;
+
+    /* The space between columns */
+    column-gap: 1rem;
+}
+
+.masonry-grid__item {
+    /* Prevent a column from breaking into multiple columns */
+    break-inside: avoid;
+}
+```
+
+{% demo %}{% include "patterns/masonry-grid.njk" %}{% enddemo %}
diff --git a/pages/masonry-grid/index.tsx b/pages/masonry-grid/index.tsx
deleted file mode 100644
index d58f83f..0000000
--- a/pages/masonry-grid/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.MasonryGrid}>
-            <Head>
-                <meta name="description" content="Create a masonry grid with CSS" />
-                <meta name="og:description" content="Create a masonry grid with CSS" />
-                <meta name="twitter:description" content="Create a masonry grid with CSS" />
-                <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="masonry-grid">
-    <!--Item -->
-    <div class="masonry-grid__item">...</div>
-
-    <!-- Repeat other items -->
-</div>
-`}
-                css={`
-                    .masonry-grid {
-                        /* It is split into 3 columns */
-                        column-count: 3;
-
-                        /* The space between columns */
-                        column-gap: 1rem;
-
-                        /* Misc */
-                        width: 100%;
-                    }
-
-                    .masonry-grid__item {
-                        /* Prevent a column from breaking into multiple columns */
-                        break-inside: avoid;
-
-                        /* Misc */
-                        margin-bottom: 1rem;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div className="masonry-grid">
-                        <div className="masonry-grid__item">
-                            <Rectangle height={32} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={64} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={96} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={64} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={128} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={96} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={128} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={32} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={64} />
-                        </div>
-                        <div className="masonry-grid__item">
-                            <Rectangle height={32} />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.SimpleGrid]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/masonry-grid/Cover.tsx b/patterns/masonry-grid/Cover.tsx
deleted file mode 100644
index 8eab9c2..0000000
--- a/patterns/masonry-grid/Cover.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '0.5rem',
-                }}
-            >
-                <div
-                    style={{
-                        columnCount: 3,
-                        columnGap: '0.25rem',
-                        width: '80%',
-                    }}
-                >
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={16} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={12} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={8} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={24} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={16} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={12} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={16} />
-                    </div>
-                    <div style={{ breakInside: 'avoid', marginBottom: '0.25rem' }}>
-                        <Rectangle height={12} />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 0875572..cbfab1a 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -49,6 +49,7 @@
 @import './patterns/keyboard-shortcut';
 @import './patterns/layered-card';
 @import './patterns/lined-paper';
+@import './patterns/masonry-grid';
 @import './patterns/media-object';
 @import './patterns/modal';
 @import './patterns/notification';
diff --git a/styles/patterns/_masonry-grid.scss b/styles/patterns/_masonry-grid.scss
new file mode 100644
index 0000000..c33501f
--- /dev/null
+++ b/styles/patterns/_masonry-grid.scss
@@ -0,0 +1,19 @@
+.masonry-grid {
+    /* It is split into 3 columns */
+    column-count: 3;
+
+    /* The space between columns */
+    column-gap: 1rem;
+
+    /* Demo */
+    height: 100%;
+    width: 100%;
+}
+
+.masonry-grid__item {
+    /* Prevent a column from breaking into multiple columns */
+    break-inside: avoid;
+
+    /* Misc */
+    margin-bottom: 1rem;
+}
\ No newline at end of file