【Next.js】DaisyUIの複数のCardを横並びにする方法

DaisyUIの複数のCardコンポーネントを横並びにする！

Tailwind CssのフレームワークDaisy UIの複数のCardコンポーネントをサクッとシンプルなコーディングで横並びにする方法を教えます！

完成イメージ

こんな感じで横並びに簡単にサクッと出来てしまいます。

ポイントは、Gridプロパティを使うことですね...!
下記のように、divタグのclassName属性の中に「grid grid-col3 gap-4」みたいな感じで記載します。

ちなみに「grid grid-col3 gap-4」とは、「Gridプロパティを使って3つのカラムに区切って各オブジェクトのスキマをgap-4分開ける」という解釈になります。

app/auth/login/dashboard/page.tsx

<div className="cardArea grid grid-cols-3 gap-4">                                               
    {getEvents.length > 0 && getEvents.map((event)=>( 
        <Card event={event} key={event.eventid}></Card>
    ))}                                                                                                            
</div>

全体のコードサンプルはこちら↓

app/auth/login/dashboard/page.tsx

'use client'//←忘れずに記載すること

import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import Navbar from "@/app/components/navbar/page";
import Footer from "@/app/components/footer/page";
import Card from "@/app/components/card/page";
import SelectAllEvents from "@/app/pages/api/selectAllEvents";
import { useState,useEffect } from "react";
import { QueryResult } from "mysql2";


export default function dashboard(){
    const [userId,setUserId] = useState(0);//sessionStorage.getItem("id")
    const [getEvents, setGetEvents] = useState<any[]>([]); // getEventsを状態として定義
    
    const router = useRouter();   
    //const userId = sessionStorage.getItem("id");
    const userEmail = sessionStorage.getItem("email");
    const userPassword = sessionStorage.getItem("password");
    console.log("セッションのユーザIDは、"+userId);

    let changeUserId = Number(sessionStorage.getItem("id"));
    console.log("変更後のセッションユーザーIDは、" + changeUserId);
    //setUserId(Number(sessionStorage.getItem("id")));
    //console.log("セッションのユーザIDは、"+setUserId);

    if(userId == null){
        return null;
    }

    //全イベントを格納する配列
    let events:any[];
    
    useEffect(()=>{
        // 非同期データ取得関数
        const fetchEvents = async () => {
            //非同期なのでawait修飾子を必ずつける
            events =await SelectAllEvents(Number(1)); // ユーザーIDを使ってイベントを取得 userId ※ここでは暫定的に1を付け手検証
            
            //取得した配列の個数を出力する
            console.log("取得した配列の長さは、" + events[0].length);
                        
            console.log("コンソール画面に出力するデータは：" + JSON.stringify(events)); // コンソールに出力
            console.log("コンソール画面に出力する最初のデータは：" + events[0][0]); // コンソールに出力
            const jsonEvents:any = JSON.stringify(events[0][0]);
            console.log("コンソール画面に出力するJSONデータは：" + jsonEvents); // コンソールに出力
            
            //[検証]最初のレコードからイベントタイトルを変数に格納する
            const event = events[0][0];
            //[検証]最初のレコードからイベントタイトルをコンソールに出力
            console.log(event.eventtitle);

            //★【重要】取得したイベント「events[0]」を状態にセットする
            setGetEvents(events[0]);
            
            console.log("eventsの値は、" + events);                     
        };
        
        fetchEvents(); // イベント取得を実行                    
    },[userId])

    // ここでは、getEventsの0番目のデータをconsole.logで出力する
    useEffect(() => {
        if (getEvents.length > 0) {
            console.log("GetEventsのデータ配列の長さは：" + getEvents[0].length); // 配列の0番目を出力
            console.log("GetEventsのデータは："+getEvents[0]); // 配列の0番目を出力
            console.log("GetEventsの最初のデータは："+getEvents[0][0]); // 配列の0番目を出力
            console.log("取得したsetGetEvents配列の長さは、" + getEvents[0].length);
            
        }
    }, [getEvents]); // getEventsが更新されるたびに実行 
            
    console.log("一番外のgetEventsは、" + JSON.stringify(getEvents[0]));
    
    return(
        <div>
            <Navbar></Navbar>
            <div className="cardArea grid grid-cols-3 gap-4">                                               
                {getEvents.length > 0 && getEvents.map((event)=>( 
                    <Card event={event} key={event.eventid}></Card>
                ))}                                                                                                            
            </div>
            {/* getEventsの0番目を表示する部分 */}
            ログイン後のページ
            <div>ユーザーID：{userId}</div>
            <div>ユーザーEmail：{userEmail}</div>
            <div>ユーザーパスワード：{userPassword}</div>
            <Footer></Footer>
        </div>
    );
}

結論...Tailwind CSSの公式サイトに載っていました。↓

Diasy UIは、Tailwind CSSベースで作成されたフレームワークだから、今回のようなデザインってTailwindの公式サイトに実はあるんですね！

Daisy UIの公式サイトに載っていないため、ちょっと残念...（Bootstrapの公式サイトとかChatGPTやGoogleで結構調べたけど、公式サイトなら基本に則っているためシンプルな書き方で実現出来ちゃいました）

困ったときは、Tailwind公式サイトですね🌝

以上です