使用 CSS Flex 实现指定间距的九宫格

有这样的需求：在指定的宽度中，实现一个 9x9 的九宫格布局，item 之间的间距是固定的，比如 4px。item 的宽度等于容器宽度减去间距后平分，需要动态确定。

Flex 实现宫格布局很简单，只需要设置为 row 排列，然后指定 wrap 换行排列就行了：

*, ::after, ::before {
    box-sizing: border-box;
}
.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.item {
    display: flex;
    width: 33.333333%;
    aspect-ratio: 1;
}

每个 item 的宽度设置为父元素宽度的 1/3，就实现了一个九宫格。

现在 item 之间是没有间距的，把内容放在 item 里面，然后对 item 设置 padding，这样每个 item 之间就产生了间距：

.item {
    display: flex;
    width: 33.333333%;
    aspect-ratio: 1;
    padding: 2px;
}
.grid-img-item {
    display: flex;
    width: 100%;
    height: 100%;
    background: red;
}

如果设计稿的间距是 4px，那么这里的 padding 就设置为 2px = 4px * 0.5 。

但是现在整个九宫格产生了 2px 的 padding，需要使用负数的 margin 把多余的 padding 抵消掉：

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -2px;
}

现在就自适应宽度，还能指定间距的九宫格布局就完成了。

完整的 demo：

<!DOCTYPE html>
<html>
    <head>
        <style>
            *, ::after, ::before {
                box-sizing: border-box;
            }
            .content {
                display: flex;
                flex-direction: column;
                margin: auto;
                background: orange;
                overflow: hidden;
                width: 85%;
            }
            .grid {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                background: green;
                margin: -2px;
            }
            .item {
                display: flex;
                width: 33.333333%;
                aspect-ratio: 1;
                padding: 2px;
            }
            .grid-img-item {
                display: flex;
                width: 100%;
                height: 100%;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="grid">
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
                <span class="item"><img class="grid-img-item"/></span>
            </div>
        </div>
    </body>
</html>