How to reduce gap between columns in Grid - css

Question

I have got a React function in a component in which I use Grid in order to sort out my images and text.
This is my code:
function HomePageDescr() {
return (
<div className="hp-descr-container">
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-12 mx-8">
<img
className="img-php col-span-2 md:row-span-3object-cover w-600 h-600"
src={housePic4}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="mt-6 text-2xl font-bold text-darkerGreen col-span-2">
What is the Personal House Shopper?
</h1>
</Zoom>
<p className="md:row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-8 mx-8 ">
<img
className="pt-6 text-2xl font-bold text-darkerGreen md:row-span-1 col-span-2"
src={housePic1}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="pt-6 text-2xl font-bold text-darkerGreen row-span-1 col-span-2">
Where are we based?
</h1>
</Zoom>
<p className="row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
</div>
);
}function HomePageDescr() {
return (
<div className="hp-descr-container">
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-12 mx-8">
<img
className="img-php col-span-2 md:row-span-3object-cover w-600 h-600"
src={housePic4}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="mt-6 text-2xl font-bold text-darkerGreen col-span-2">
What is the Personal House Shopper?
</h1>
</Zoom>
<p className="md:row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
<div className=" hp-descr grid grid-rows-3 grid-flow-col mt-8 mx-8 ">
<img
className="pt-6 text-2xl font-bold text-darkerGreen md:row-span-1 col-span-2"
src={housePic1}
alt="What is Personal Home Shopper"
/>
<Zoom left>
<h1 className="pt-6 text-2xl font-bold text-darkerGreen row-span-1 col-span-2">
Where are we based?
</h1>
</Zoom>
<p className="row-span-2 col-span-2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velitm
</p>
</div>
</div>
);
}
I would like the gap to be removed between elements, if you see in responsive this is the result with Tailwind:
I am new to Grid so any help figuring out how to remove the space in the grids is welcome :)

Answer 1

Remove any manual added margins and paddings (for example your h1 has an mt-6 class) and instead add the desired grid-gap class to the grid div itself see https://tailwindcss.com/docs/gap for different class options