如何减少网格中列之间的间隙

Question

我在一个组件中有一个 React 函数，我在其中使用 Grid 来整理我的图像和文本。

这是我的代码：

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>
  );
}

我希望消除元素之间的间隙，如果您在响应中看到这是 Tailwind 的结果：

我是 Grid 的新手，因此欢迎任何关于如何删除网格中的空间的帮助 :)

Answer 1

删除任何手动添加的边距和填充（例如，您的 h1 有一个 mt-6 类），而是将所需的 grid-gap 类添加到网格中 div 本身参见 https://tailwindcss.com/docs/gap 以了解不同的类选项