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

Posted 2023-03-07

【中文标题】如何减少网格中列之间的间隙

【英文标题】：How to reduce gap between columns in Grid

【发布时间】：2021-02-22 02:11:09

【问题描述】：

我在一个组件中有一个 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
          
        />
        <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
          
        />
        <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
          
        />
        <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
          
        />
        <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 的新手，因此欢迎任何关于如何删除网格中的空间的帮助 :)

【参考方案1】：

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