If you used Pinterest before then you’d know it has an unique way of laying out their image or video cards.
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/pinterest-grid-example.png" alt="Pinterest Grid" style="width:80%" />
 </div>
</div>
So, the question is how would one layout a grid like this ?
There is actually an easy way using material ui react component library.
It provides the exact component for laying out your grid just like this.
Let’s take a look at how to do this.
<h2 id="steps"><a href="#steps" aria-hidden="true" tabindex="-1"></a>Steps</h2>
<h3 id="1-install-material-ui-base-and-lab"><a href="#1-install-material-ui-base-and-lab" aria-hidden="true" tabindex="-1"></a>1. Install Material UI base and lab</h3>
npm:
<div class="remark-highlight"><pre class="language-sh"><code>npm install @mui/material @mui/lab @emotion/react @emotion/styled
</code></pre></div>
yarn:
<div class="remark-highlight"><pre class="language-sh"><code>yarn add @mui/material @mui/lab @emotion/react @emotion/styled
</code></pre></div>
<h3 id="2-add-the-masonary-component"><a href="#2-add-the-masonary-component" aria-hidden="true" tabindex="-1"></a>2. Add the Masonary component</h3>
<div class="remark-highlight"><pre class="language-tsx line-numbers"><code>import { useState } from 'react';
import {
 Box,
} from '@mui/material';
import Masonry from '@mui/lab/Masonry';
import photos from './photos.json';

const randomPhotos = /* Array of photos goes here */;

export default function PinterestGrid() {
 const [activeIndex, setActiveIndex] = useState&lt;null | number&gt;(null);
 return (
 &lt;Box&gt;
 &lt;Masonry columns={7} spacing={2}&gt;
 {randomPhotos.map((photo, index) =&gt; (
 &lt;Box
 onMouseEnter={() =&gt; setActiveIndex(index)}&gt;
 &lt;img
 style={{
 width: '100%',
 display: 'block',
 borderRadius: '8px',
 marginBottom: '8px',
 cursor: 'pointer',
 filter: activeIndex === index
 ? 'brightness(80%)'
 : 'brightness(100%)',
 }}
 src={photo.regular}
 /&gt;
 &lt;/Box&gt;
 ))}
 &lt;/Masonry&gt;
 &lt;/Box&gt;
 );
}
</code></pre></div>
<h3 id="finished-example"><a href="#finished-example" aria-hidden="true" tabindex="-1"></a>Finished example</h3>
Check out the finished example in the github respository below 👇
<a target="_blank" href="https://github.com/Jareechang/mui-pinterest-grid">
 <div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="https://opengraph.githubassets.com/8595a444ebdb46b702a359507baee72cdaffa11bd839fe63b8f6421a2c3ed9c1/Jareechang/mui-pinterest-grid" alt="material mui demo" style="width:80%" />
 </div>
 </div>
</a>

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Pinterest Grid: The Simple Way