Nested Grid height changes abnormally when changing screen size to lg in Tailwind CSS framework

I'm using Tailwind CSS in my project. For the purpose of simplicity, I have used colors in divs. The HTML code is as follows:

<div class="wraper mt-5 grid gap-4 grid-cols-1 lg:grid-cols-2">
    <div class="grid gap-4 w-full grid-cols-1 xs:grid-cols-2 my-4">
        <div class="relative flex justify-center w-full h-[30rem] bg-yellow-400">

        </div>
        <div class="relative flex justify-center w-full h-[30rem] bg-violet-500">

        </div>
        <div class="adv relative w-full xs:col-span-2 h-[10rem] bg-gray-700">

        </div>
    </div>
    <div class="grid gap-4 w-full grid-cols-2 lg:mt-4">
        <div class="w-full h-10 bg-red-600">

        </div>
        <div class="w-full h-10 bg-green-500">

        </div>
        <div class="test bg-orange-800 w-full h-20 col-span-2">

        </div>
    </div>
</div>

The breakpoint system I used in config file is:

screens: {
  'xs': '428px',
  'sm': '576px',
  'md': '768px',
  'lg': '992px',
  'xl': '1200px',
  'xxl': '1400px'
},

The output is:

As you see, there's a big space (or gap) between the brown element and those red and green elements. I don't know why it is happening. This problem occurs only in lg screen size. In lower screen sizes, everything is Ok. Is there anything wrong in my HTML/CSS codes?

You have an applied height to the divs you mention.

you have h-10 so red should be:

<div class="w-full bg-red-600"></div>

you have h-10 green should be:

<div class="w-full bg-green-500"></div>

you have h-20 orange should be:

<div class="test col-span-2 w-full bg-orange-800"></div>