How to change the grid?

Question

Hello, I’m having trouble putting the responsive part of the site, changing the grid from column to row, I’ve looked at enough documentation on the internet, but I’m still having a lot of trouble tidying up. The column does not break to the line below, passing the screen, cutting part of the content.

.item-1{
    background-color: white;
    height: auto;
    width: 700px;
    grid-area: 1 / span 2 / span 3;
}
.container{
    display: grid;
    border-radius: 15px;
    margin: 20px;
    overflow: hidden;
}
@media only screen and (max-width: 550px){
    .item-1{
        grid-row: 1 / 2 / 3;
    }
    .item-2 input{
        width: 300px;
    }
    .item-1, .item-2, .item-3{
        width: 375px;
    }
}

I tried to add only the parts I mentioned to the grid. I don’t know if it helps, but I’ll make git available if it’s easier to view. https://github.com/yuriaguiar-86/join

Answer 1

Just make a small change to your code, as you just haven’t set the grid-Row on the second and third element.

@media only screen and (max-width: 550px){
    .item-1{
        grid-row: 1;
    }

    .item-2 input{
        grid-row:2;
        width: 300px;
    }
    .item-3{
        grid-row: 3;
    }
    .item-1, .item-2, .item-3{
        width: 375px;
    }
}