html - How to get rid of extra cells generated by grid?

Question

In order to make my site responsive using Tailwind CSS, I set my classes to change from two columns to two rows when it passes some defined breakpoints

<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>

This works fine when it is in mobile, but once it is expanded to larger sizes, it leaves behind extra grid cells, which results in unwanted empty space. How can I get rid of these unwanted cells?

question from:https://stackoverflow.com/questions/65644073/how-to-get-rid-of-extra-cells-generated-by-grid

Answer 1

As @Saddy mentioned, you need to reduce the number of rows to 1 in addition to setting the columns to 2.

<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">

As a side note, you can also omit sm:grid-rows-2 and lg:grid-cols-2 as the changes get applied from the given breakpoint onwards (e.g., using md: will also apply to lg: and xl: breakpoints).