サブグリッドでカードレイアウトを組んでみる

目次

• 解説
• デモ
• 全体のコード

解説

他のコンテンツとの高さを揃えるために、サブグリッドを使ってみる。

まずはカードのコンポーネントを作成する。

コンテンツの内容によって中身の高さが一律になってない・・・

Tailwindだとgrid-rows-subgridを使用することで、サブグリッドを使用することができる。

親要素には以下を指定

grid grid-cols-[repeat(auto-fit,minmax(350px,1fr))] gap-4

小要素に以下を指定することによって高さを一律にすることができる。

grid grid-rows-subgrid gap-4 row-span-4

row-span-4は、4行分の高さを指定することができる。

なので小要素の数を指定してください！

デモ

全体のコード

<div
  class="grid grid-cols-[repeat(auto-fit,minmax(350px,1fr))] gap-4"
>
  <div
    class="row-span-4 grid grid-rows-subgrid gap-4 rounded-lg bg-gray-800 p-4 shadow"
  >
    <img
      src="画像パス"
      class="rounded-lg"
      alt=""
      width="640"
      height="427"
      loading="lazy"
      decoding="async"
    />
    <h5 class="text-2xl font-bold tracking-tight text-white">
      ダミーテキスト
    </h5>
    <p class="font-normal text-gray-400">
      ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    </p>
    <a
      href="#"
      class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-800"
    >
      もっと見る
      <svg
        class="ms-2 h-3.5 w-3.5 rtl:rotate-180"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 14 10"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M1 5h12m0 0L9 1m4 4L9 9"
        ></path>
      </svg>
    </a>
  </div>
  <div
    class="row-span-4 grid grid-rows-subgrid gap-4 rounded-lg bg-gray-800 p-4 shadow"
  >
    <img
      src="画像パス"
      class="rounded-lg"
      alt=""
      width="640"
      height="427"
      loading="lazy"
      decoding="async"
    />
    <h5 class="text-2xl font-bold tracking-tight text-white">
      ダミーテキスト
    </h5>
    <p class="font-normal text-gray-400">ダミーテキスト</p>
    <a
      href="#"
      class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-800"
    >
      もっと見る
      <svg
        class="ms-2 h-3.5 w-3.5 rtl:rotate-180"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 14 10"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M1 5h12m0 0L9 1m4 4L9 9"
        ></path>
      </svg>
    </a>
  </div>
  <div
    class="row-span-4 grid grid-rows-subgrid gap-4 rounded-lg bg-gray-800 p-4 shadow"
  >
    <img
      src="画像パス"
      class="rounded-lg"
      alt=""
      width="640"
      height="427"
      loading="lazy"
      decoding="async"
    />
    <h5 class="text-2xl font-bold tracking-tight text-white">
      ダミーテキスト
    </h5>
    <p class="font-normal text-gray-400">
      ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    </p>
    <a
      href="#"
      class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-800"
    >
      もっと見る
      <svg
        class="ms-2 h-3.5 w-3.5 rtl:rotate-180"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 14 10"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M1 5h12m0 0L9 1m4 4L9 9"
        ></path>
      </svg>
    </a>
  </div>
  <div
    class="row-span-4 grid grid-rows-subgrid gap-4 rounded-lg bg-gray-800 p-4 shadow"
  >
    <img
      src="画像パス"
      class="rounded-lg"
      alt=""
      width="640"
      height="427"
      loading="lazy"
      decoding="async"
    />
    <h5 class="text-2xl font-bold tracking-tight text-white">
      ダミーテキストダミーテキストダミーテキスト
    </h5>
    <p class="font-normal text-gray-400">
      ダミーテキストダミーテキスト
    </p>
    <a
      href="#"
      class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-800"
    >
      もっと見る
      <svg
        class="ms-2 h-3.5 w-3.5 rtl:rotate-180"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 14 10"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M1 5h12m0 0L9 1m4 4L9 9"
        ></path>
      </svg>
    </a>
  </div>
</div>