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>
2 Replies
You would like rows and for the items in the rows to align to the same grid? You want subgrid
MDN Web Docs
Subgrid - CSS: Cascading Style Sheets | MDN
Level 2 of the CSS Grid Layout specification includes a subgrid value for grid-template-columns and grid-template-rows. This guide details what subgrid does and gives some use cases and design patterns that the feature solves.
mainly it would be great if i could just fit the div with whatever content there is , even if the content is big such as the paragraph , it should not show out put as overflowing the div horizontally,
how can i acheive that
or can i have dynamic row height for a specific grid item , is it possible?
ok gotcha , thanks brother.