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

📅  最后修改于: 2021-11-08 06:38:18             🧑  作者: Mango

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

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

例子:



  

    

  

    

        GeeksForGeeks     

       

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

           
        
        
        
        
        
        
        
        
        
    
  

输出:

方法二:

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

例子:



  

    

  

    

        GeeksForGeeks     

    

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

    
        
        
        
        
        
        
        
        
        
    
  

输出: