Grid布局中如何使渐变容器与图片宽度匹配？

云上老周

2026-8-13

解决Grid布局中渐变容器与图片宽度对齐问题

你的问题根源有两个：一是.kis固定了宽度，但Grid列用auto会根据内容自适应，导致列宽和容器宽度不匹配；二是用content:url()插入图片的方式难以控制图片尺寸，很容易和渐变容器的尺寸脱节。

下面是具体的解决步骤和修改后的代码：

1. 统一尺寸约束逻辑

取消.kis的固定宽度，改用width: 100%，让容器完全继承Grid列的宽度
调整Grid的grid-template-columns，明确列数和宽度（你只有3个.kis元素，原来写4个auto是多余的）
给图片添加尺寸控制，确保它填满渐变容器

2. 改用更可控的图片插入方式

把content:url()替换成<img>标签，这样能更直观地调整图片样式。

修改后的HTML代码

<body>
    <div class="zafer">
        <div class="kis dz"><img src="../img/r.png" alt=""></div>
        <div class="kis">ste11</div>
        <div class="kis">ste11</div>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
</body>

修改后的CSS代码

.zafer {
    display: grid;
    height: 346px;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(3, 367px); /* 3个元素对应3列，每列宽度367px */
    background-color: #fdd;
    gap: 20px;
    align-items: end;
}

.kis {
    height: 234px;
    width: 100%; /* 容器占满Grid列宽 */
    background: linear-gradient(262.38deg, #F5EC0A 11.9%, rgba(20, 228, 241, 0.93) 92.9%);
    border-radius: 50px;
}

.dz img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填满容器且保持比例，避免拉伸变形 */
    border-radius: 50px; /* 和容器统一圆角样式 */
}

.zafer * {
    border: 1px solid red;
    box-sizing: border-box; /* 让边框包含在元素宽度内，避免额外撑开尺寸 */
}