put n-divs next to each others on large screens and one below each others on small screens

Question

I am struggling to achieve this efect ;

I would like to put n-divs next to each others if the screen is big enough , and one below each other otherwise , and I would li

Answer 1

I think that you're looking for flex-wrap:wrap.

According to the MDN reference:

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.

.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/ 
    background-color: green;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto; 
    }
.homepage-top-category-container-title{
    background-color: black;
    margin-bottom: 10px;
    }
#homepage-top-category-container-title{
    color: orange;
    }
.homepage-top-category-container-list{ /*This should be the container*/
    display: flex;
    flex-wrap:wrap;
    height: auto;
    margin-left: auto;
    margin-right: auto; 
    background-color: yellow;
    }
.homepage-top-category-container-item{
    display: block;
    float: none;
    width: auto;
    height:auto;
    border: solid 1px black;
}

    

        

            block title here
        
        

            

                block A
            
            

                block B
            
            

                block C
            
            

                block D