如何使用Bootstrap在方形网格中指定分隔符的间隙

如何使用Bootstrap在方形网格中指定分隔符的间隙

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

语法:

  • 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: <line-size>;
    grid-row-gap: <line-size>;
}

示例:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        /*  Use grid-row-gap and grid-column-gap
            to specify the gap between the square
            grids the gap between the row is
            specified 10px the gap between the
            row is specified 100px */
        .grid-box {
            display: grid;
            grid-template-columns: auto auto auto auto;
  
            /* Specify the divider gap measurement in a grid */
            grid-row-gap: 10px;
            grid-column-gap: 100px;
            background-color: yellow;
            padding: 5px;
        }
  
        .grid-box div {
            background-color: pink;
            text-align: center;
            padding: 15px 0;
            font-size: 25px;
        }
    </style>
</head>
  
<body>
  
    <h1>
        Demo to change the divider
        gap in Square grid picture
    </h1>
  
    <div class="grid-box">
        <div class="item1">gfg</div>
        <div class="item2">gfg</div>
        <div class="item3">gfg</div>
        <div class="item4">gfg</div>
        <div class="item5">gfg</div>
        <div class="item6">gfg</div>
        <div class="item7">gfg</div>
        <div class="item8">gfg</div>
        <div class="item9">gfg</div>
        <div class="item10">gfg</div>
        <div class="item11">gfg</div>
        <div class="item12">gfg</div>
        <div class="item13">gfg</div>
        <div class="item14">gfg</div>
        <div class="item15">gfg</div>
        <div class="item16">gfg</div>
        <div class="item17">gfg</div>
        <div class="item18">gfg</div>
        <div class="item19">gfg</div>
        <div class="item20">gfg</div>
        <div class="item21">gfg</div>
        <div class="item22">gfg</div>
        <div class="item23">gfg</div>
        <div class="item24">gfg</div>
    </div>
</body>
  
</html>

输出:
如何使用Bootstrap在方形网格中指定分隔符的间隙?

一个行与行之间有50px间隙,列与列之间有50px间隙的网格例子。
如何使用Bootstrap在方形网格中指定分隔符的间隙?

Browser兼容:

支持在Flex布局
* Chrome: No
* Firefox: Yes (63.0)
* Edge: No
* 互联网浏览器。没有
* Opera: No
* Safari: N0

支持网格布局
* Chrome: Yes (66.0)
* Firefox: Yes (61.0)
* Edge: Yes (16.0)
* 互联网浏览器。没有
* Opera: Yes (53.0)
* Safari: Yes (10.1)

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Bootstrap教程