如何摆脱网格产生的额外单元格？答案

【问题标题】：How to get rid of extra cells generated by grid?如何摆脱网格产生的额外单元格？
【发布时间】：2021-04-15 01:13:00
【问题描述】：

为了使用 Tailwind CSS 使我的网站具有响应性，我将类设置为在通过一些定义的断点时从两列更改为两行

<section id="hero" class="pt-12 pb-12 bg-yellow-400">
  <div class="container grid items-center max-w-6xl px-2 py-2 mx-auto bg-yellow-100 lg:grid-cols-2 md:grid-cols-2 sm:grid-rows-2 xs:grid-rows-2">
    <div class="">
      <img src="./img/port-vector.png"
        class="scale-50"
        alt="logo">
    </div>
    <div class="text-center xs:pt-24 xs:pb-24 sm:pt-24 sm:pb-24 auto-cols-fr">
      <h1 class="text-4xl">GABRIEL STEVEN</h1>
      <h3 class="text-2xl">Front-End Web Dev, Designer</h3>
    </div>
  </div>
</section>

当它在mobile 中时它工作得很好，但是一旦它扩大到更大的尺寸，它就会留下额外的网格单元，这会导致不需要的empty space。我怎样才能摆脱这些不需要的细胞？

【问题讨论】：

碰巧，当你从两行改为两列时，你是否也将行数减少到了1？

标签： html css tailwind-css

【解决方案1】：

作为@Saddy mentioned，除了将列设置为2之外，还需要将行数减少到1。

<div class="container grid items-center max-w-6xl px-2 py-2 mx-auto bg-yellow-100 md:grid-cols-2 md:grid-rows-1 xs:grid-rows-2">

作为旁注，您还可以省略sm:grid-rows-2 和lg:grid-cols-2，因为更改从给定断点开始应用（例如，使用md: 也将适用于lg: 和xl: 断点）。

【讨论】：