最近流行のレイアウトはshadcn/uiのCardで実装出来るぞ

カードを並べておけばそれっぽくなるんだ。

前提

• Remix
• shadcn/uiインストール済み

コード全文

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";

const App = () => {
  return (
    <div className="m-4">
      <div className="grid grid-cols-3 grid-rows-2 gap-4">
        <Card className="col-span-2 row-span-2">
          <CardHeader>
            <CardTitle>Large Box</CardTitle>
          </CardHeader>
          <CardContent>
            <p>This is the large box content.</p>
          </CardContent>
        </Card>
        {/* Text Box 1 */}
        <Card className="col-span-1 row-span-1">
          <CardHeader>
            <CardTitle>Text Box 1</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Text Box 1 Content</p>
          </CardContent>
        </Card>
        {/* Text Box 2 */}
        <Card className="col-span-1 row-span-1">
          <CardHeader>
            <CardTitle>Text Box 2</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Text Box 2 Content</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default App;

ダークモード

ライトモード

スマホ用にスマホは1カラムにする

import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";

export default  function MyPageCard(){
    return (
        <div className="m-4">
          <div className="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4">
            <Card className="md:col-span-2 md:row-span-2 aspect-video">
              <CardHeader>
                <CardTitle>Large Box</CardTitle>
              </CardHeader>
              <CardContent>
                <p>This is the large box content.</p>
              </CardContent>
            </Card>
            {/* Text Box 1 */}
            <Card className="md:col-span-1 md:row-span-1">
              <CardHeader>
                <CardTitle>Text Box 1</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Text Box 1 Content</p>
              </CardContent>
            </Card>
            {/* Text Box 2 */}
            <Card className="md:col-span-1 md:row-span-1">
              <CardHeader>
                <CardTitle>Text Box 2</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Text Box 2 Content</p>
              </CardContent>
            </Card>
          </div>
        </div>
      );
    }