如何摆脱网格生成的额外单元格？

Question

为了使用 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, but once it is expanded to larger sizes, it leaves behind extra grid cells, which results in unwanted empty space 中工作正常。我怎样才能摆脱这些不需要的细胞？

Answer 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: 断点）。

如何摆脱网格生成的额外单元格？

How to get rid of extra cells generated by grid?

html

css

tailwind-css