React로 Masonry (타일을 깔아 놓은 디자인) 구현

$ yarb add react-masonry-css # or npm install -D react-masonry-css

import React from "react"
import Masonry from "react-masonry-css"

export default () => {
  const events = [
    {
      "title": "React勉強会",
      "text": "Reactの勉強をします"
    },
    {
      "title": "JavaScript勉強会",
      "text": "JavaScriptの勉強をします"
    },
    {
      "title": "Ruby勉強会",
      "text": "Rubyの勉強をします"
    },
    {
      "title": "Rails勉強会",
      "text": "Railsの勉強をします"
    },
    {
      "title": "TypeScript勉強会",
      "text": "TypeScriptの勉強をします"
    }
  ]
  // 1行に表示するカラム数
  const breakpointColumnsObj = {
    default: 4,
    1350: 3,
    1048: 2,
    576: 1,
  }
  return (
    <div>
      <h1>勉強会一覧</h1>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {events.map(e => (
          <div className='event-card'>
            <h3>{e.title}</h3>
            <p>{e.text}</p>
          </div>
      ))}
      </Masonry>
    </div>
  )
}

.my-masonry-grid {
  display: flex;
  margin-left: -30px; /* 項目間の余白のサイズ */
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 30px; /* 項目間の余白のサイズ */
  background-clip: padding-box;
}

.my-masonry-grid_column > .event-card {
  background: grey;
  margin-bottom: 30px;
}

주의점