html - 给握把中的特定行一个特殊的高度

Question

我正在尝试使用 html 和 css 使用网格制作此表单

所有代码都在这里

密码笔

这是 css 代码，您可以在上面的链接中看到 html 代码

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.container {
    padding: 40px;
    font-family: 'Lato', sans-serif;
    display: grid;
    grid-template-columns: repeat(3, calc(100%/3));
    grid-template-rows: repeat(3, calc(100%/3));
    grid-gap: 15px;
}

.container div {
    border-radius: 5px;
    color: #fff;
    position: relative;
}

.container h3,
.container p {
    letter-spacing: 1px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.container h3 {
    text-transform: uppercase;
}

.container a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px;
    display: inline-block;
    position: absolute;
    bottom: -25%;
}

.a-1 {
    background-color: #fdc731;
}

.a-2 {
    background-color: #f56464;
}

.container img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.container .text-container {
    padding: 20px;
}

.child-1,
.child-3 {
    background-color: #f3b917;
}

.child-1 {
    grid-row: 1/ span 2;
}

.child-3 {
    grid-row: 1/ span 2;
    grid-column: 3;
}

.child-2 {
    background-color: #ff4343;
    text-align: center;
    padding: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child-2 p {
    font-size: 20px;
}

.child-4,
.child-6 {
    background-color: #00800085;
    text-align: center;
}

.child-5 {
    background-color: #fb7878;
        grid-row: 2 / span 3;
}

.child-6 {
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
}

.child-4 {
        grid-row: 3 / span 2;
}

问题在于最后一列，我无法像最后一列上方的图片那样将高度与图片相同，知道如何制作吗？

我该如何解决这个问题？

标签： htmlcss