setzen n-divs nebeneinander auf großen Bildschirmen und einen unter einander auf kleinen Bildschirmen

Question

Ich kämpfe um diesen Effekt zu erreichen;

Ich möchte n-divs nebeneinander legen, wenn der Bildschirm groß genug ist, und einander unter einander, und ich möchte diese N-Divs in einem div enthalten (der gelbe Container in meinem Code) und der Titelbereich (schwarz in meinem Code) + der gelbe Container in einem Wrapper, der alles einkapselt (grün in meinem Code)

Ich fing an, den Code zu schreiben, aber ich bin weit davon entfernt, das Ergebnis zu erreichen.

Bitte, sei nett zu mir, ich bin neu in der Font-End-Entwicklung und immer noch im Lernprozess.

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

Ich werde keine Korrekturen schätzen und/oder Verbesserungen an meinem Code.

Code hier:

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

Danke.

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

Ich habe etwas Hilfe, meinen Code von sehr kenntnisreichen Mitgliedern unserer Gemeinschaft reparierend, also habe ich meinen Code aktualisiert, obwohl ich bemerkte einige andere Probleme:

1- Block, die genug Platz haben, um auf einer gleichen Lign ausrichten, tun Sie es nicht und gehen Sie unter.

2- Ich würde gerne 4 Blöcke pro Zeile mit einem linken Rand nur zwischen ihnen setzen. Die maximale Breite für den Wrapper beträgt 1080px.

4 divs von 255px + 3 linker Rand von 20px und 0px auf Extremen (rechte Seite des ersten div und linke Seite des letzten div).

Edited Code hier:

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> 

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

} 

und JSfiddle hier --->https://jsfiddle.net/mz2u6rzg/

Ich habe ein Bild besser hinzugefügt Blöcke identifizieren Ich werde alle Korrekturen und Verbesserungen aus unserer Community zu schätzen wissen.

Danke für Ihre Hilfe.

Answer 1

Ich denke, dass Sie für flex-wrap:wrap suchen.

Nach the MDN reference:

Die CSS flex-wrap Eigenschaft gibt an, ob Flex-Elemente in einer einzigen Linie gezwungen werden, oder kann auf mehrere Zeilen werden.

.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

können Sie den CSS-Medien-Tag für die Bildschirmgröße überprüfen, aber es könnte nicht mit altem Browser

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

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

siehe CSS media queries for screen sizes

i aktualisiert habe Ihre Geige mit diesem Code nach dem "kompatibel sein Normal default 'Anzeige für Ihre Klasse‘Styling so wird es über die schreiben'

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

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

Wenn Sie den Zoom in Ihrem Browser verwenden, sehen Sie ihn in Aktion.

hoffe, das hilft

Answer 3

Sie erreichen diese Medien query.I verwendet haben 400px als Bruchstelle mit Ihnen nach Ihren choice.Here verwenden können, ist ein Arbeits 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 
    } 

}