'How to make grid sytem resposive in tailwind css

Hello hope are you well! I am working on a component Vue.js, and I am used utility class tailwind CSS to styles. Based on my task, I have to created a div as parent that include all children into div parent I have put md:grid-cols-4 md:grid-rows-4 I am sharing my code until now.

  <div class="border-4 border-height  grid grid-cols-2  md:grid-cols-4 md:grid-rows-4  lg:grid-cols-4 lg:grid-rows-4  h-screen gap-1 p-2  justify-items-center items-center ">

      <div class="  border-6 border-secondary-400 w-full h-full row-start-1 row-span-3 "></div>
      <div class=" border-6 border-primary-400 h-12 w-12 transform rotate-45 "></div>
      <div class=" border-6 border-primary-400 h-22 w-22 "></div>
      <div class=" text-2xl font-semibold grid place-items-center">Emilia</div>   
   
      <div class=" border-6 border-primary-400 h-22 w-22 "></div>
      <div class=" border-6 border-primary-400 bg-primary h-12 w-12 transform rotate-45  "></div>  
      <div class=" border-6 border-primary-400 h-22 w-22 "></div>     

      <div class=" border-6 border-primary-400  bg-primary h-22 w-22 "></div>
      <div class=" border-6 border-primary-400 h-22 w-22 "></div>
      <div class=" border-6 border-primary-400 h-12 w-12 transform rotate-45 "></div>    
      <div class=" text-2xl font-semibold grid place-items-center">Emilia</div> 
      <div class=" col-start-2 md:col-span-3  w-full h-full border-6 border-tertiary-400 "></div>
     
       

     <!-- you probably need a few more of these divs ... -->
   </div>

Also I am enter link description here sharing link on codepene just for example: enter link description here

My problem is: 1.when I am on brekpoints 767 -640 md box go out of the border box or div parent

As you can see on image below: I try to set a class in dev parent border-height and style with css when I have set height 100% ok it works for this specific breakpoints. I don't know if you have any a best solution? in my case to fixed this problem. Thanks. enter image description here

htmlcss


Solution 1:[1]

you can use @media query and pure css, at this link you can find the docs. Or you can try by using the tailwind overflow

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Filippo Brigati

Related Questions