Je n'arrive pas à configurer la structure de grille d'un tableau de bord créé avec Tailwind CSS

Question

J'écris une interface de tableau de bord en utilisant Tailwind CSS. J'ai créé une structure de grille de la page et y ai placé mes composants. Cependant, toutes les colonnes sont égales en largeur et en longueur. Certains composants doivent généralement paraître plus larges, donc certains des composants que j'ai ajoutés ne correspondent pas au fichier Figma. Comment puis-je résoudre ce problème?

Code de ma page :

// Components

// Layouts
import DashboardLayout from "@/layouts/dashboard"

// Icons
import { BoltIcon } from '@heroicons/react/24/solid'
import { Bars3CenterLeftIcon } from '@heroicons/react/24/solid'
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid'
import { Squares2X2Icon } from '@heroicons/react/24/solid'
import { CheckIcon } from '@heroicons/react/24/solid'

// Types
type Props = {}

export default function OverviewTemplate({ }: Props) {
  return (
    <DashboardLayout>
      <div className="grid grid-cols-3 grid-rows-4 gap-x-2 gap-y-3 bg-gray-200 p-2">

        <div className="min-h-[50px] rounded-lg col-span-3">
          <div className="text-gray-900 text-2xl font-semibold leading-8 mb-4">Dashboard</div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg row-span-3">
          <div className="bg-white rounded-lg row-span-3">
            <div className="text-center">
              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
              </svg>
              <p className="text-gray-900 text-sm font-medium leading-5 mt-1">Want to see metrics for your latest video? Upload and post a video to get started.</p>
              <div className="mt-6">
                <button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                  Upload Content
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg">
          <div className="sm:rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <h3 className="text-indigo-900 text-base font-semibold leading-6">Refer to your Network</h3>
              <div className="mt-2 max-w-xl text-indigo-900 text-sm font-medium leading-5 whitespace-nowrap">
                <p>Earn up to 15% recurring commission.</p>
              </div>
              <div className="mt-5">
                <button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-xs font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Upload Content</button>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg row-span-3">
          <fieldset className="space-y-2">
            <div className="px-4 py-5 sm:px-6 flex flex-row">
              <Squares2X2Icon className="h-6 w-6 fill-indigo-500 mr-5" />
              <h3 className="text-gray-900 text-base font-semibold leading-6">Gamification area</h3>
            </div>

            <div className="relative flex items-start border-t border-gray-200">
              <div className="ml-3">
                <p className="text-black text-sm font-medium leading-5 mb-3 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>

            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md bg-emerald-50 border border-emerald-200 p-2">Complete your Profile</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Review  Content Guideline</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Meet-up with Creator Team</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3 text-sm">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Upload First Content</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Share Your Content on Social Media</button>
              </div>
            </div>
            <div className="relative flex items-start">
              <div className="ml-3">
                <button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Register Affiliate Program</button>
              </div>
            </div>
          </fieldset>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg">
          <div className="overflow-hidden bg-white shadow sm:rounded-lg">
            <div className="px-4 py-5 sm:px-6 flex flex-row">
              <BoltIcon className="h-6 w-6 fill-indigo-500 mr-5" />
              <h3 className="text-gray-900 text-base font-semibold leading-6">What’s new on Omnicourse</h3>
            </div>
            <div className="px-4 py-5 sm:p-0">
              <dl className="">
                <div className="pt-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 border-t border-gray-200">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Product Development News</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Newly published Contents</dt>
                </div>
              </dl>
            </div>
          </div>
        </div>

        <div className="bg-white min-h-[50px] rounded-lg">
          <div className="overflow-hidden shadow sm:rounded-lg">
            <div className="px-4 py-5 sm:px-6 flex flex-row">
              <Bars3CenterLeftIcon className="h-6 w-6 fill-indigo-500 mr-5" />
              <h3 className="text-gray-900 text-base font-semibold leading-6 whitespace-nowrap">Tips & Tricks</h3>
              <EllipsisVerticalIcon className="h-6 w-6 fill-gray-400 ml-20" />
            </div>
            <div className="px-4 py-5 sm:p-0">
              <dl className="">
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6 border-t border-gray-200">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">How to Choose the best recording tool</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">5 Steps to Generate interesting Content</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">3 Ways to Earn Income via Omnicourse</dt>
                </div>
                <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
                  <dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Developing Productive Habits in 3 Steps</dt>
                </div>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </DashboardLayout>
  )
}

Exemple de fichier Figma :

Ma page ressemble à ceci :

Answer 1

Comme mentionné dans les commentaires, vous pouvez mieux y parvenir en utilisant flex 而不是 grid

Sortie :

Code :

<div class="flex h-screen flex-col bg-gray-300">
  <div>Dashboard</div>
  <div class="flex flex-1 gap-4">
    <div class="flex w-2/4 items-center justify-center rounded-lg bg-orange-300">Upload content</div>
    <div class="mb-7 flex w-1/4 flex-col gap-4">
      <div class="flex h-1/6 items-center justify-center rounded-lg bg-red-300">Content</div>
      <div class="flex h-2/6 items-center justify-center rounded-lg bg-yellow-300">Content</div>
      <div class="flex h-3/6 items-center justify-center rounded-lg bg-blue-300">Content</div>
    </div>
    <div class="flex h-5/6 w-1/4 items-center justify-center rounded-lg bg-green-300">Another content</div>
  </div>
</div>