how can i make a single grid item from many grid items have multiple rows or automatic height.

<div className="grid grid-cols-11 gap-1.5">
<p className=" col-span-3"></p>
<div className=" col-span-8 flex justify-end">
<p>ি৭ November,2022</p>
</div>
<p className=" col-span-6"></p>
<p className="col-span-full py-5">
ি
</p>
<p className=" col-span-4">ি</p>
<p className=" col-span-7">miraj</p>
<p className=" col-span-4">ি</p>
<p className=" col-span-7">ি</p>
<p className=" col-span-4"></p>
<p className=" col-span-7"></p>
<p className=" col-span-4"></p>
<p className=" col-span-7">ি</p>
<p className=" col-span-4"></p>
<p className=" col-span-7"></p>
<p className=" col-span-4">িি</p>
<p className=" col-span-7"></p>
<p className=" col-span-4">ি</p>
<p className=" col-span-7"></p>
<div className="col-span-11 border my-5 border-gray-300 w-[100%]"></div>
<p className=" col-span-4">ি</p>
<p className=" col-span-7"></p>
<p className=" col-span-4">িিি</p>
<p className=" col-span-7">ি</p>
<div className="col-span-11 border my-5 border-gray-300 w-[100%]"></div>
<p className=" col-span-4">ি</p>
<div className=" h-auto col-span-11 w-full ">
<p className="p-2 bg-gray-300 col-span-11 rounded-md">
dsjkjkl;sdfj;
</p>
</div>
<div className="col-span-11 border my-5 border-gray-300 w-[100%]"></div>
</div>
Was this page helpful?