😇

Next.js + TailWindCSS Grid Layout

2024/05/26に公開

Next.js

Tailwind CSS

tech

Tips💡

前回やってみた画像の配置方法を使って、　CSS Gridと同じレイアウトをやってみようと思います。　

スマートフォンサイズのとき以外は横に画像が４個並んでます。

[ソースコード]
今回はサンプルなので全部同じ画像です笑
PCとタブレットサイズの時は、横に画像が４個並んでいますsm:grid-cols-4を指定します。スマートフォンサイズの時は、画像が２個並んでいます。grid-cols-2を指定します。
gap-4は画像の間の余白です。

app/page.tsx

import Image from "next/image";

export default function Home() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
    <div className="col-span-1">
      <Image src="/orechan.jpeg" alt="俺ちゃん" width={300} height={300} className="rounded-full" />
    </div>
  </div>
  );
}

[PC]

[iPad]

[iPhone]

最後に

普通のCSSだと端末ごとにサイズ指定してもなぜかいい感じに配置できていない気がする。結構難しいんですよね💦
普通のCSSだとこんな感じでやります。参考までに。

こちらが公式のリファレンス　

Tips💡

最後に

Discussion