无法使用tailwindCSS定位分区

Question

这是我的反应码：

<div>
      <div>
        <div className=" grid gap-4 grid-row-4 grid-flow-col">
          <div className="row-span-4 h-2/5 w-auto p-2 bg-white">
            <p className="m-4 font-bold">
              8 task completed out of 10
              <br></br>
              <h4 className="font-bold">23 December, Sunday</h4>
            </p>
            <div className="m-4"> Calender </div>
            <div className="m-4 p-4 shadow-md">
              <p>
                <h4 className="font-bold">Send benefit review by Sunday</h4>
                <span className="text-gray-600">
                  Due date: December 23, 2018
                </span>
                <br></br>
                Image: George Fields
              </p>
            </div>
            <div className="m-4 p-4 shadow-md">
              <p>
                <h4 className="font-bold">Invite to office meet-up</h4>
                <span className="text-gray-600">
                  Due date: December 23, 2018
                </span>
                <br></br>
                Image: Rebecca Moore
              </p>
            </div>

            <div className="m-4 p-4 shadow-md">
              <p>
                <h4 className="font-bold">Office meet-up</h4>
                <span className="text-gray-600">
                  Due date: December 23, 2018
                </span>
                <br></br>
                Image: Lindsey Stroud
                <h2 className="text-blue-1000 font-bold pt-4"> Show More </h2>
              </p>
            </div>
          </div>

          <div className="h-80 w-1/2 p-2 bg-white">
            <h4 className="font-bold"> Deals </h4>

            <AreaChart />
          </div>
          <div className="h-80 w-1/2 p-2  bg-white">
            <h4 className="font-bold"> Tasks</h4>
            <ul className="absolute inset-10">
              <li className="text-green-600 font-bold">Active</li>
              <li className="text-yellow-600 font-bold">Completed</li>
              <li className="text-red-600 font-bold">Ended</li>
            </ul>
            <PieChart />
          </div>
        </div>
      </div>
    </div>

我无法定位这些网格，我不知道把课程放在哪里，也不知道具体的课程，请记住这是我第二天的学习顺风，任何帮助都将不胜感激。我也是附加我的UI的图片，并将指向我想要定位这个网格布局到的区域。谢谢

​

Answer 1

我试图尽可能多地使用您的代码，结果如下：

​

​

守则：

      <div className="flex flex-row ">
        <div className="flex flex-col w-96">
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
          <div className="px-2">Placeholder</div>
        </div>

        <div className="grid sm:grid-cols-2 bg-gray-200 w-full">
          <p className="m-4 font-bold bg-white">
            8 task completed out of 10
            <br></br>
            <h4 className="font-bold">23 December, Sunday</h4>
          </p>
          <div className="m-4 h-80 w-1/2 p-2 bg-white">
            <h4 className="font-bold"> Deals </h4>
            AreaChart
          </div>
        </div>
      </div>