Live
<div id="root"></div>
Live
x
.list { display: flex; padding: 20px 10px;}.column { padding: 0 10px;}.item { & + & { margin-top: 20px; }}.card { display: flex; align-items: center; justify-content: center; background-color: #eee; font-size: 40px; font-weight: 700; color: #fff;}/* for reset */body { font-family: system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, 'Segoe UI', Arial, sans-serif;}body,ul,li,p { margin: 0; padding: 0;}ul { list-style: none;}
Live
xxxxxxxxxx65
import Masonry from "https://cdn.skypack.dev/react-masonry-css@1.0.16";const MasonryList = () => { return ( <Masonry breakpointCols={4} className="list" columnClassName="column" > <div className="item"> <div className="card" style={{height: `250px`}}> 1</div> </div> <div className="item"> <div className="card" style={{height: `120px`}}> 2</div> </div> <div className="item"> <div className="card" style={{height: `180px`}}> 3</div> </div> <div className="item"> <div className="card" style={{height: `130px`}}>4</div> </div> <div className="item"> <div className="card" style={{height: `270px`}}>5</div> </div> <div className="item"> <div className="card" style={{height: `320px`}}>6</div> </div> <div className="item"> <div className="card" style={{height: `110px`}}>7</div> </div> <div className="item"> <div className="card" style={{height: `190px`}}>8</div> </div> <div className="item"> <div className="card" style={{height: `210px`}}>9</div> </div> <div className="item"> <div className="card" style={{height: `80px`}}>10</div> </div> <div className="item"> <div className="card" style={{height: `220px`}}>11</div> </div> <div className="item"> <div className="card" style={{height: `210px`}}>12</div> </div> <div className="item"> <div className="card" style={{height: `100px`}}>13</div> </div> <div className="item"> <div className="card" style={{height: `160px`}}>14</div> </div> <div className="item"> <div className="card" style={{height: `190px`}}>15</div> </div> <div className="item"> <div className="card" style={{height: `320px`}}>16</div> </div> </Masonry> )};ReactDOM.render( <MasonryList />, document.getElementById('root'));
External CSS
This Pen doesn't use any external CSS resources.