I'm trying yo make this form using html and css using the grid
the all code is here
this is th css code and you can see the html code in the link above
* {
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;
}
the problem is with the last column that I can't make it like the picture above the last column doesn't take the height to be same as the picture any idea how to make it ?
how can i fix this problem ?