如何在顺风css中实现网格系统的响应

Question

你好，希望你还好吧！我正在开发一个组件Vue.js，并且我使用了工具类--顺风CSS --样式。根据我的任务，我必须创建一个div作为父级，它将所有的子级都包含到我已经将md:grid-cols-4md:grid-rows-4中的div中，直到现在我都在共享我的代码。

​

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

​

另外，我是codepene上的在这里输入链接描述共享链接，例如：在这里输入链接描述

我的问题是:1.当我使用brekpoint 767 -640 md框时，请走出边框或div家长。

正如您在下面的图片中所看到的:当我设置高度100%确定时，我尝试用css在dev、父边框、高度和样式中设置一个类，它适用于这个特定的断点。我不知道你有没有最好的解决方案？在我的情况下解决这个问题。谢谢。在这里输入图像描述

Answer 1

您可以使用@media查询和纯css，在这链接上可以找到文档。或者您可以通过使用顺风溢流来尝试