Add Masonry Grid

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',

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} />

client/patterns/card-layout/Details.tsx

@@ -21,7 +21,6 @@ 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
 html={`
 <div class="cards">
@@ -84,9 +83,8 @@ css={`
                     </div>
                 </div>
             </BrowserFrame>
-            </div>
 
-            <RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.MasonryGrid, Pattern.SimpleGrid]} />
         </DetailsLayout>
     );
 };

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;

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;

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;
+}

client/patterns/simple-grid/Details.tsx

@@ -21,7 +21,6 @@ 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
 html={`
 <!-- Row -->
@@ -140,9 +139,8 @@ css={`
                     </div>
                 </div>
             </BrowserFrame>
-            </div>
 
-            <RelatedPatterns patterns={[Pattern.CardLayout]} />
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.MasonryGrid]} />
         </DetailsLayout>
     );
 };