提案力アップのカギ！Bento Boxレイアウトに挑戦しよう

<section class="bento bento--basic">
  <article class="card card--wide">A</article>
  <article class="card">B</article>
  <article class="card card--tall">C</article>
  <article class="card">D</article>
  <article class="card card--wide">E</article>
  <article class="card">F</article>
</section>

<style>
.bento {
  --gap: clamp(8px, 1vw, 16px);
  --col: clamp(160px, 24vw, 300px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr));
  gap: var(--gap);
  grid-auto-flow: dense; /* 空きを詰める */
}
.card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  min-height: 120px;
}
.card--wide { grid-column: span 2; }
.card--tall { grid-row: span 2; min-height: 260px; }
@media (max-width: 640px) {
  .card--wide { grid-column: span 1; }
}
</style>

<section class="bento bento--visual">
  <article class="vcard vcard--hero">
    <img src="/img/hero.jpg" alt="特集" class="vcard__img">
    <h3 class="vcard__title">特集：ケーススタディ</h3>
  </article>
  <article class="vcard"><img src="/img/a.jpg" alt=""><h4>導入事例A</h4></article>
  <article class="vcard"><img src="/img/b.jpg" alt=""><h4>導入事例B</h4></article>
  <article class="vcard vcard--wide"><img src="/img/c.jpg" alt=""><h4>特集C</h4></article>
  <article class="vcard"><img src="/img/d.jpg" alt=""><h4>Tips</h4></article>
</section>

<style>
.bento--visual { --gap: 12px; --col: clamp(180px, 26vw, 320px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--col),1fr));gap:var(--gap);grid-auto-flow:dense;}
.vcard{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff}
.vcard__img, .vcard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vcard h3,.vcard h4{margin:.6em .9em 1em;font-size:clamp(14px,1.6vw,18px);line-height:1.5}
.vcard--hero{grid-column:span 2}
.vcard--wide{grid-column:span 2}
@media (max-width: 700px){.vcard--hero,.vcard--wide{grid-column:span 1}}
</style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="container py-4">
  <div class="row g-3 align-items-stretch">
    <div class="col-12 col-md-6">
      <div class="card h-100 shadow-sm rounded-4 p-3">A（ワイド）</div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card h-100 shadow-sm rounded-4 p-3">B</div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card h-100 shadow-sm rounded-4 p-3">C</div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100 shadow-sm rounded-4 p-3">D（やや大）</div>
    </div>
    <div class="col-6 col-md-4">
      <div class="card h-100 shadow-sm rounded-4 p-3">E</div>
    </div>
    <div class="col-6 col-md-4">
      <div class="card h-100 shadow-sm rounded-4 p-3">F</div>
    </div>
  </div>
</section>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/mixitup@3/dist/mixitup.min.js"></script>

<section class="container py-4">
  <div class="d-flex gap-2 mb-3">
    <button class="btn btn-outline-primary" data-filter="all">すべて</button>
    <button class="btn btn-outline-primary" data-filter=".case">事例</button>
    <button class="btn btn-outline-primary" data-filter=".tips">Tips</button>
    <button class="btn btn-outline-primary" data-sort="default:asc">標準</button>
    <button class="btn btn-outline-primary" data-sort="data-pop:desc">人気順</button>
  </div>

  <div id="mix" class="row g-3 align-items-stretch">
    <div class="col-12 col-md-6 mix case" data-pop="5">
      <div class="card h-100 rounded-4 p-3">A（事例／pop:5）</div>
    </div>
    <div class="col-6 col-md-3 mix tips" data-pop="1">
      <div class="card h-100 rounded-4 p-3">B（Tips／pop:1）</div>
    </div>
    <div class="col-6 col-md-3 mix case" data-pop="3">
      <div class="card h-100 rounded-4 p-3">C（事例／pop:3）</div>
    </div>
    <div class="col-12 col-md-4 mix tips" data-pop="8">
      <div class="card h-100 rounded-4 p-3">D（Tips／pop:8）</div>
    </div>
    <div class="col-6 col-md-4 mix case" data-pop="6">
      <div class="card h-100 rounded-4 p-3">E（事例／pop:6）</div>
    </div>
    <div class="col-6 col-md-4 mix tips" data-pop="2">
      <div class="card h-100 rounded-4 p-3">F（Tips／pop:2）</div>
    </div>
  </div>
</section>

<script>
  const mixer = mixitup('#mix', {
    selectors: { target: '.mix' },
    animation: { duration: 300, nudge: true, clampWidth: true }
  });
  document.querySelectorAll('[data-filter]').forEach(btn => {
    btn.addEventListener('click', () => mixer.filter(btn.dataset.filter));
  });
  document.querySelectorAll('[data-sort]').forEach(btn => {
    btn.addEventListener('click', () => mixer.sort(btn.dataset.sort));
  });
</script>

<section class="bento bento--elastic">
  <article class="e-card"><h4>お知らせ</h4><p>短い文</p></article>
  <article class="e-card"><h4>導入事例</h4><p>本文がやや長い場合の例。本文がやや長い場合の例。</p></article>
  <article class="e-card e-card--wide"><h4>特集</h4><p>長文でも自動で伸びます。長文でも自動で伸びます。長文でも自動で伸びます。</p></article>
  <article class="e-card"><h4>Tips</h4><p>短文</p></article>
</section>

<style>
.bento--elastic{
  --gap:12px; --col: clamp(180px, 26vw, 320px);
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(var(--col),1fr));
  grid-auto-rows: 8px; /* 1行の“基準” */
}
.e-card{border:1px solid #e8e8e8;border-radius:12px;padding:16px;background:#fff;
  display:grid;grid-auto-rows:min-content;align-content:start}
.e-card h4{margin:0 0 .5em;font-size:clamp(14px,1.6vw,18px)}
.e-card--wide{grid-column:span 2}
@media (max-width: 700px){.e-card--wide{grid-column:span 1}}
</style>