📌  相关文章
📜  如何使用 Bootstrap 指定方形网格中的分隔线间隙？

📅  最后修改于: 2021-08-31 02:15:36             🧑  作者: Mango

CSS grid-row-gap 属性用于设置网格行元素之间的间隙大小。同样，CSS grid-column-gap 属性用于设置列元素之间的间隙(装订线)的大小。

句法：

  • CSS grid-column-gap 属性 
    grid-column-gap: none|length|percentage|initial|inherit;
  • CSS grid-row-gap 属性 
    grid-row-gap: length|percentage|global-values;

方法：它指定网格线的大小。您可以将其视为设置列/行之间的间距宽度。

  • 选择包含网格布局的类。
  • 指定该类的 grid-gap 属性的值。
  • 例子： 
    .container {
    grid-column-gap: ;
    grid-row-gap: ;
}

例子： 



  

    

  

  
    

        Demo to change the divider
        gap in Square grid picture
    

  
    

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

        
gfg

    


  

输出：
grid-row-gap 和 grid-column-gap 的输出。

行间距为 50 像素，列间距为 50 像素的网格示例。
网格间隙输出

浏览器兼容性：

    支持 Flex 布局：
  • 铬：没有
  • 火狐：是 (63.0)
  • 边缘：没有
  • Internet Explorer：否
  • 歌剧：没有
  • 野生动物园：N0
    支持网格布局：
  • 铬：是(66.0)
  • 火狐：是 (61.0)
  • 边缘：是 (16.0)
  • Internet Explorer：否
  • 歌剧：是 (53.0)
  • Safari：是 (10.1)