如何使用 CSS 使 div 跨越网格中的两行？

假设我们在一行中有 5 个元素，并且任务是在一行的中间放置一个更大的元素。如何在 CSS 的帮助下使 DIV 跨越网格的 2 行。

方法一：先获取 ID(‘outer’)的外层 DIV 的高度。我们知道现在可以使用带有flex-direction: column和flex-wrap: wrap 的CSS Flexbox 设计外部元素的高度。容器上的固定高度告诉 flex 项目在哪里包装。

例子：

  

    

  

    

        GeeksForGeeks
    
  
    

        How to make a div span two 
        rows in a grid using CSS
    
      
    

        

        

        

        

        

        

        

        

        

    

  

输出：

方法二：

• 制作一个块级的外部 DIV。
• 创建一个 90px 宽度的网格列并执行 5 次。
• 行将自动创建。
• 属性喜欢。 Grip-gap是grid-row-gap和grid-column-gap 的简写。
• 大项目将从第 1 行到第 3 行
• 大项目将从网格列第 2 行到第 3 行。

例子：

  

    

  

    

        GeeksForGeeks
    
    

        How to make a div span two rows
        in a grid using CSS
    
    

        

        

        

        

        

        

        

        

        

    

  

输出：