📌  相关文章
📜  如何使用Bootstrap在Square Grid中指定分隔线间隙？

📅  最后修改于: 2021-05-25 11:45:05             🧑  作者: 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-gap-gap和grid-column-gap的输出。

网格示例，行之间的间隙为50px，列之间的间隙为50px。
网格间隙输出

浏览器兼容性：

    支持Flex布局：
  • Chrome：否
  • Firefox：是(63.0)
  • 边缘：无
  • Internet Explorer：否
  • 歌剧：否
  • Safari：N0
    支持网格布局：
  • 铬：是(66.0)
  • Firefox：是(61.0)
  • 边缘：是(16.0)
  • Internet Explorer：否
  • 歌剧：是(53.0)
  • Safari：是(10.1)