4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

ReactでMasonry(タイルを敷き詰めたようなデザイン)を実装する

react-masonry-cssを使ってこういうデザインを実装します。(このデザインはCSSだけだと結構しんどいです。)
FireShot Capture 034 - React Masonry Css Example - paulcollett.github.io.png

$ yarb add react-masonry-css # or npm install -D react-masonry-css
JSX
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>
  )
}
CSS
.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;
}

注意点

この例では1行に4カラムをデフォルトのカラム数に設定しています。
576px以下の時は1カラムしか表示しないように設定していますが、ページ表示後の一瞬だけ4カラム表示されてしまいます。
これを防ぐために、絶対にきちんと表示したいスマホ専用のDOMを新たに作成し、PCで表示する時にはdisplay: noneで非表示にすることになりました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?