From c5e6d4f140ed0deba7cdec2e2d9fbd3e63bb5f9e Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 28 Apr 2021 16:29:01 +0700
Subject: [PATCH] Add Masonry Grid

---
 client/constants/Pattern.ts                   |   1 +
 client/pages/ExplorePage.tsx                  |   1 +
 client/patterns/card-layout/Details.tsx       |  54 +++----
 client/patterns/masonry-grid/Cover.tsx        |  45 ++++++
 client/patterns/masonry-grid/Details.tsx      |  86 ++++++++++
 client/patterns/masonry-grid/masonry-grid.css |  20 +++
 client/patterns/simple-grid/Details.tsx       | 150 +++++++++---------
 7 files changed, 253 insertions(+), 104 deletions(-)
 create mode 100644 client/patterns/masonry-grid/Cover.tsx
 create mode 100644 client/patterns/masonry-grid/Details.tsx
 create mode 100644 client/patterns/masonry-grid/masonry-grid.css

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 68ed829..51183e5 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -45,6 +45,7 @@ enum Pattern {
     KeyboardShortcut = 'Keyboard shortcut',
     LayeredCard = 'Layered card',
     LinedPaper = 'Lined paper',
+    MasonryGrid = 'Masonry grid',
     MediaObject = 'Media object',
     MegaMenu = 'Mega menu',
     Menu = 'Menu',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 4f94f09..331e598 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -52,6 +52,7 @@ const ExplorePage = () => {
                             <div className="explore__collection">
                                 <CoverCard pattern={Pattern.CardLayout} />
                                 <CoverCard pattern={Pattern.HolyGrail} />
+                                <CoverCard pattern={Pattern.MasonryGrid} />
                                 <CoverCard pattern={Pattern.SameHeightColumns} />
                                 <CoverCard pattern={Pattern.Sidebar} />
                                 <CoverCard pattern={Pattern.SimpleGrid} />
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
index e8e9b47..f464b77 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -21,8 +21,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="twitter:description" content="Create a card layout with CSS flexbox" />
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
             </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
+            <BrowserFrame
 html={`
 <div class="cards">
     <!-- A card with given width -->
@@ -53,40 +52,39 @@ css={`
     padding-right: 8px;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
                             display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
+                            flexWrap: 'wrap',
+                            margin: '0 -8px',
+                            width: '60%',
                         }}
                     >
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexWrap: 'wrap',
-                                margin: '0 -8px',
-                                width: '60%',
-                            }}
-                        >
-                            {
-                                Array(10).fill(0).map((_, index) => {
-                                    return (
-                                        <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
-                                            <Rectangle height={80} />
-                                        </div>
-                                    );
-                                })
-                            }
-                        </div>
+                        {
+                            Array(10).fill(0).map((_, index) => {
+                                return (
+                                    <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
+                                        <Rectangle height={80} />
+                                    </div>
+                                );
+                            })
+                        }
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
 
-            <RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.MasonryGrid, Pattern.SimpleGrid]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/masonry-grid/Cover.tsx b/client/patterns/masonry-grid/Cover.tsx
new file mode 100644
index 0000000..74a8e8d
--- /dev/null
+++ b/client/patterns/masonry-grid/Cover.tsx
@@ -0,0 +1,45 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+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/client/patterns/masonry-grid/Details.tsx b/client/patterns/masonry-grid/Details.tsx
new file mode 100644
index 0000000..9c3d08c
--- /dev/null
+++ b/client/patterns/masonry-grid/Details.tsx
@@ -0,0 +1,86 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+import './masonry-grid.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.MasonryGrid}>
+            <Helmet>
+                <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" />
+            </Helmet>
+            <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>
+
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.SimpleGrid]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/masonry-grid/masonry-grid.css b/client/patterns/masonry-grid/masonry-grid.css
new file mode 100644
index 0000000..f26a81b
--- /dev/null
+++ b/client/patterns/masonry-grid/masonry-grid.css
@@ -0,0 +1,20 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.masonry-grid {
+    column-count: 3;
+    column-gap: 1rem;
+
+    /* Misc */
+    width: 100%;
+}
+
+.masonry-grid__item {
+    /* Prevent a column from breaking into multiple columns */
+    break-inside: avoid;
+
+    /* Misc */
+    margin-bottom: 1rem;
+}
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 0f18d59..842afc1 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -21,8 +21,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
             </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame                    
+            <BrowserFrame
 html={`
 <!-- Row -->
 <div class="row">
@@ -57,92 +56,91 @@ css={`
     flex: 1;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                    <div style={{ width: '60%' }}>
+                        <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
                             </div>
-
-                            <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
-                                <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
                             </div>
+                        </div>
 
-                            <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                        <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
+                            <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
+                                <Rectangle height={32} />
                             </div>
-
-                            <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
-                                <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
                             </div>
-
-                            <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
                             </div>
+                        </div>
 
-                            <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
-                                <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '1', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
-                                <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
-                                    <Rectangle height={32} />
-                                </div>
+                        <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+
+                        <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
+                            <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+
+                        <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                        </div>
+
+                        <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
+                            <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '1', padding: '0 8px' }}>
+                                <Rectangle height={32} />
+                            </div>
+                            <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
+                                <Rectangle height={32} />
                             </div>
                         </div>
                     </div>
-                </BrowserFrame>
-            </div>
+                </div>
+            </BrowserFrame>
 
-            <RelatedPatterns patterns={[Pattern.CardLayout]} />
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.MasonryGrid]} />
         </DetailsLayout>
     );
 };