Flex布局中使用多栏布局

比如一行要放四个元素，每个元素都相同间距

1、column-gap 属性用来设置多栏布局 multi-column 中元素列之间的间隔大小 ；

2、grid 布局中 gap 属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式，并且起初是叫 grid-gap。

        <div class="first">
            <div class="chid">1</div>
            <div class="chid">2</div>
            <div class="chid">3</div>
            <div class="chid">4</div>
            <div class="chid">5</div>
            <div class="chid">6</div>
            <div class="chid">7</div>
            <div class="chid">8</div>
        </div>
        
     //css
     
    .first{
        width: 100%;
        border: 1px rgb(68, 0, 255) solid;
        display: flex;
        flex-wrap: wrap;
        gap: 4%  //关键  总的宽度减去每个宽度然后除以间隔数 100-（22*4）=12/3=4
    }
    .chid{
        width: 22%;
        height: 100px;
        border: 1px red solid;
    }