How organize products in rows of 2 on mobile site?

How to change the mobile layout of a "store" page? How would I go about doing that? Instead of my items be stacked one by one, I need them to be in rows of 2.As pictured in the second picture.

1st pic of my current layout.

2nd pic is how i want it.

how do i do it? 

Please Help. i tired youtube but didn't have any luck 

Hi there, please check this snippet, you can add it into Settings-> Custom Css

@media screen and (min-width: 768px) {
    .products.collection-content-wrapper .list-grid .grid-item {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .products.collection-content-wrapper .list-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column-gap: 10px;
        grid-row-gap: 0;
        padding: 0;
    }
}

where do i find "custom css"

6 minutes ago, IceWater951 said:

where do i find "custom css"

From settings screen, go to design 

15 minutes ago, bangank36 said:

right there ?

thanks it worked!

good job youre doing good!

hello on mobile I want to have all of my products display in a 2 per row grid, but i cannot figure this out. please help!

humanbeingmankind.com is the site

specifically referring to all of the pages under the 'shop' tab on the menu bar

This just worked perfectly for me too - thank you!