AI向け説明 AI Description

マーソンリーレイアウトは`display: grid`と`grid-template-columns: repeat(var(--masonry-columns), 1fr)`で実装します。各カードは`grid-row: span X`で高さを調整し、`gap`でカード間の間隔を設定します。レスポンシブ対応は`@media`クエリでカラム数を調整します。

Masonry layout is implemented with `display: grid` and `grid-template-columns: repeat(var(--masonry-columns), 1fr)`. Each card adjusts height with `grid-row: span X`, and `gap` sets spacing between cards. Responsive support adjusts column count with `@media` queries.

調整可能パラメータ Adjustable Parameters

• --masonry-columns — グリッドのカラム数 number of grid columns
• --masonry-gap — カード間のギャップ gap between cards
• responsive breakpoints — レスポンシブ対応のブレークポイント responsive breakpoints

実装 Implementation

HTML + CSS + JS

<div class="masonry" data-masonry style="--masonry-columns: 3">
  <div class="masonry__item" style="grid-row: span 2">Item 1</div>
  <div class="masonry__item">Item 2</div>
  <div class="masonry__item" style="grid-row: span 3">Item 3</div>
  <div class="masonry__item">Item 4</div>
</div>

<style>
.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;
}
</style>

<script>
const masonry = document.querySelector("[data-masonry]");
masonry.style.setProperty("--masonry-columns", 4);
</script>

React (JSX + CSS)

// 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;
}