在大屏幕上将n-div彼此相邻，在小屏幕上将n-div彼此相邻

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 like those n-divs to be contained in one div ( the yellow container in my code ) and the title area (black in my code) + the yellow container in a wrapper that encapsulates everything ( green in my code )

I started to write the code , but I am far from achieving the result.

Please , be nice to me , I am new to font-end developement and still in the learning process.

Jsfiddle here --> https://jsfiddle.net/9atbtj0L/1/

I will appreciate any corrections and/or enhancements to my code.

code here :

html

<div class="homepage-wrapper">
<div class="homepage-top-category-container">
    <div class="homepage-top-category-container-title">
        <span id="homepage-top-category-container-title">block title here</span>
    </div>
    <div class="homepage-top-category-container-list">
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
            block A
        </div>
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
            block B
        </div>
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
            block C
        </div>
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
            block D
        </div>
    </div>
</div>
    </div>
</div>  

css

.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;
    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;
    }

Thank you.

******************************EDIT***********************************

I've got some help fixing my code from very knowledgeable members of our community , so I have updated my code , alhough I noticed some others problems :

1- block that have enough space to align on a same lign don't do so and go underneath.

2- I would like to put 4 blocks per line with a left-margin only between them. The max-width for the wrapper is 1080px.

4 divs of 255px + 3 left-margin of 20px and 0px on extremes ( right side of the first div and left side of the last div ).

Edited code here :

html :

<div class="homepage-wrapper">
    <div class="homepage-top-category-container">
        <div class="homepage-top-category-container-title">
            <span id="homepage-top-category-container-title">block title here</span>
        </div>
        <div class="homepage-top-category-container-list">
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
            </div>
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
            </div>
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
            </div>
            <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
            </div>
        </div>
    </div>
</div>

and css :

.homepage-wrapper{ 
    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{
    display: flex;
    flex-wrap:wrap;
    width: auto;
    height: auto;
    background-color: yellow; 
    }
.homepage-top-category-container-list > div {
        margin-left: 20px;
         margin-bottom: 20px;
    }
.homepage-top-category-container-item{
    display: block;
    float: none;
    width: auto;
    height:auto;
    border: solid 1px black;

}

and JSfiddle here ---> https://jsfiddle.net/mz2u6rzg/

I have added an image to better identify blocks. I will appreciate any corrections and enhancements from our community.

Thanks for your help.

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; } 

 <div class="homepage-wrapper"> <div class="homepage-top-category-container"> <div class="homepage-top-category-container-title"> <span id="homepage-top-category-container-title">block title here</span> </div> <div class="homepage-top-category-container-list"> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA"> block A </div> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB"> block B </div> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC"> block C </div> <div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD"> block D </div> </div> </div> </div> 

Answer 2

You can achieve this using media query.I have used 400px as the break point you can use as per your choice.Here is a working JSfiddle link https://jsfiddle.net/0f5y8q8b/

@media only screen and (min-width: 400px) {
    .homepage-top-category-container-item{
        width: 100%
    }
    .homepage-top-category-container-list{
      display:block
    }

}

Answer 3

you can use the css media tag to check for screen size but it might not be compatible with old browser

@media only screen and (max-width: 1023px) {
}

@media only screen and (min-width: 1024px) {
}

see CSS media queries for screen sizes

i'Ve updated your fiddle with this code AFTER the 'normal' styling so it will over write the 'default' display for your class

@media only screen and (max-width: 300px) {
  .homepage-top-category-container-list{ /*This should be the container*/
  display: block;
  }
}

https://jsfiddle.net/9atbtj0L/1/

if you use the zoom in/out of your browser you will see it in action.

hope this helps