L-004 Layout medium

How to create a masonry layout マーソンリーレイアウトの作り方

Masonry layout for cards with varying heights. Implemented using CSS Grid with customizable columns and gap. 不均等な高さのカードを配置するマーソンリーレイアウト。CSS Gridを使用して実装し、カラム数とギャップをカスタマイズできます。

masonry grid layout cards

ライブデモ Live Demo

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
3
16px

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Masonry layout for cards with varying heights. Implemented using CSS Grid with customizable columns and gap.

不均等な高さのカードを配置するマーソンリーレイアウト。CSS Gridを使用して実装し、カラム数とギャップをカスタマイズできます。

どこで使うかWhere to use

landing page, marketing site, portfolio, product page

写真ギャラリー、Pinterest風コンテンツ、画像ボード、ブログ記事グリッド

特徴Key features

CSS-only masonry layout using column-count or CSS Grid with grid-template-rows: masonry (where supported). Items fill columns top-to-bottom automatically. Responsive breakpoints adjust column count. No JavaScript measurement needed for basic masonry.

column-countまたはCSS Gridのgrid-template-rows:masonry（サポート対象ブラウザ）を使用したCSSオンリーのメイソンリーレイアウト。アイテムが自動的に上から下に列を埋める。レスポンシブブレークポイントで列数を調整。基本的なメイソンリーにJavaScript計測不要。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--masonry-columns—number of grid columns
--masonry-gap—gap between cards
responsive breakpoints—responsive breakpoints

実装コード Implementation Code 

// react/L-004.jsx
import { useState } from "react";
import "./L-004.css";

const items = [
  { id: 1, content: "Item 1", span: 2 },
  { id: 2, content: "Item 2", span: 1 },
  { id: 3, content: "Item 3", span: 3 },
  { id: 4, content: "Item 4", span: 1 }
];

export default function MasonryLayout({ columns = 3 }) {
  return (
    <div
      className="masonry"
      style={{ "--masonry-columns": columns }}
    >
      {items.map((item) => (
        <div
          key={item.id}
          className="masonry__item"
          style={{ gridRow: `span ${item.span}` }}
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}
/* react/L-004.css */
.masonry {
  display: grid;
  grid-template-columns: repeat(var(--masonry-columns, 3), 1fr);
  gap: 16px;
}

.masonry__item {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #dfe3f6;
}
import "./L-004.css";

const items = [
  { id: 1, content: "Item 1", span: 2 },
  { id: 2, content: "Item 2", span: 1 },
  { id: 3, content: "Item 3", span: 3 },
  { id: 4, content: "Item 4", span: 1 }
];

export default function MasonryLayout({ columns = 3 }) {
  return (
    <div
      className="masonry"
      style={{ "--masonry-columns": columns }}
    >
      {items.map((item) => (
        <div
          key={item.id}
          className="masonry__item"
          style={{ gridRow: `span ${item.span}` }}
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}
.masonry {
  display: grid;
  grid-template-columns: repeat(var(--masonry-columns, 3), 1fr);
  gap: 16px;
}

.masonry__item {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #dfe3f6;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Using CSS column-count, the browser distributes block children into columns naturally. Each item breaks flow vertically like newspaper columns. The items stack top-to-bottom in each column, and the browser picks the shortest column for the next item automatically. @media queries reduce column-count on smaller screens.

CSS column-countを使用してブラウザがブロック子を自然に列に分配します。各アイテムは新聞の列のように縦にフロー。アイテムは各列で上から下に積み重ねられ、ブラウザが次のアイテムに対して最も短い列を自動的に選択。@media queryが小さい画面でcolumn-countを減らします。

カスタマイズ方法Customization

Use column-gap to set spacing between columns. Set break-inside: avoid on items to prevent cards from splitting across columns. For a JavaScript-powered masonry with true shortest-column logic, append items via JS measuring column heights.

column-gapで列間のスペースを設定。カードが列をまたいで分割されないようアイテムにbreak-inside:avoidを設定。真の最短列ロジックを持つJavaScript駆動のメイソンリーには、列の高さを計測するJSでアイテムを追加。

注意点Caveats

CSS columns flow top-to-bottom, not left-to-right, which can confuse the reading order for screen readers and keyboard users. For accessible masonry, consider a JavaScript layout engine that maintains DOM order matching visual order.

CSS列は左から右ではなく上から下に流れるため、スクリーンリーダーとキーボードユーザーの読み取り順序が混乱することがあります。アクセシブルなメイソンリーには、DOM順序が視覚的順序と一致するJavaScriptレイアウトエンジンの使用を検討してください。

よくある質問 Frequently Asked Questions

How to customize the masonry layout? Masonry Layoutをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the masonry layout in React? ReactでMasonry Layoutを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of masonry layout? Masonry Layoutのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.