我开始创建一个基于float的网格系统，并通过padding: 0 0.75em;应用于margin-right: -0.75em;和margin-left: -0.75;应用于行。

当我有一个完整宽度的容器时，它在视口的宽度之外渲染，并显示水平滚动条。

我希望最左边和最右边的元素沿着视口的边缘粘贴，但仍希望保留元素之间的沟槽。我一定是错过了什么。任何帮助都将不胜感激，谢谢！

下面是CSS，后面是HTML：

.container-full {
    width: 100%;
}

.row {
    margin-right: -0.75em;
    margin-left: -0.75em;
}

.row::before,
.row::after {
    display: block;
    content: "";
    clear: both;
}

[class*="column-"] {
    float: left;
    padding-right: 0.75em;
    padding-left: 0.75em;
}

<代码><；DIV类="；容器满"；>；<；DIV类="；行"；>；<；DIV类="；第3列"；>；<；DIV类="；展览简介"；>；<；IMG SRC="；./IMG/img01.JPG"；alt="；图像"；>；<；/DIV>；<；/DIV>；<；DIV类="；第3列"；>；<；DIV类="；展览简介"；>；<；IMG SRC="；./IMG/img02.JPG"；alt="；图像"；>；<；/DIV>；<；/DIV>；<；DIV类="；第3列"；>；<；DIV类="；展览简介"；>；<；IMG SRC="；./IMG/img03.JPG"；alt="；图像"；>；<；/DIV>；<；/DIV>；<；DIV类="；第3列"；>；<；DIV类="；展览简介"；>；<；IMG SRC="；./IMG/img04.JPG"；alt="；图像"；>；<；/DIV>；<；/DIV>；<；/DIV>；<；/DIV>；

顺晟科技：

您可以通过使用CSS Grid和grid-gap属性来实现这一点。

<代码><；DIV类="；容器"；>；<；IMG SRC="；https：//picsum.photos/1920/1080" alt="；"；>；<；IMG SRC="；https：//picsum.photos/1920/1081" alt="；"；>；<；IMG SRC="；https：//picsum.photos/1920/1082" alt="；"；>；<；IMG SRC="；https：//picsum.photos/1920/1083" alt="；"；>；<；/DIV>； .容器{宽度：100VW；高度：100VH；显示：网格；网格-模板-列：重复（4，1Fr）；栅格间隙：0.75rem；}IMG{最大宽度：100%；高度：100%；适合对象：封面；}