Automatisches Rasterlayout, das dem Inhalt entspricht

Question

Ich möchte ein automatisches Raster erstellen, ohne genau anzugeben, wie viele Zeilen und Spalten.

Dann wäre jede Rasterzelle breit genug, um den Inhalt (automatisch) anzupassen. Dann, wenn das Gitter nicht breit genug ist, um 3 Spalten zu passen, dann wenn 2 Spalten hätte, wenn nicht genug für 2 Spalten, dann hätte es 1 Spalte usw. Dann wenn nicht breit genug für 1 Spalte, das 1 Spalte wäre auf 100% Breite begrenzt (kein horizontales Scrollen).

Ich glaube, Sie dies mit Flex-Box zu tun, wo flex-Punkt wird auf 100% max-width beschränkt und flex-wrap aktiviert werden würde, so paßt es alles in 1 Zeile, wenn breit genug, aber zur nächsten Zeile umgebrochen würde, wenn nicht breit Genug, bis es nur noch 1 Flex-Item gibt und dieser Item auf 100% Breite limitiert ist. Aber was ist der Sinn des css-Grid-Layouts?

Ich versuche mit grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));, aber Sie enden mit horizontalen Blättern, wenn die Breite weniger als 18em ist. Wenn Sie es absenken, um 1cm zu sagen, dann erhalten Sie immer 1cm winzige Spalten, und Inhalt überläuft die Gitterzelle.

Ich lerne gerade Grid-Layout, so hoffe ich, jemand kann mir helfen.

Update: Code:

.wpr{ 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr)); 
 
    grid-gap: 1em; 
 
} 
 
.wpr > div{ 
 
    background-color: red; 
 
} 
 
img{ 
 
    width: 100%; 
 
    display: inline-block; 
 
    padding-bottom: 100%; 
 
    background-color: blue; 
 
} 
 
.wpr > div:nth-child(1){ 
 
    grid-row: auto/span 5; 
 
}

<div class="wpr"> 
 
    <div> 
 
    A<br/> 
 
    Author<br/> 
 
    <img/> 
 
    </div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
    <div>D</div> 
 
    <div>E</div> 
 
    <div>F</div> 
 
    <div>G</div> 
 
    <div>H</div> 
 
    <div>I</div> 
 
    <div>J</div> 
 
    <div>K</div> 
 
    <div>L</div> 
 
    <div>M</div> 
 
</div>

Update: Abbildung:

Ideal:

Answer 1

Ich würde empfehlen, nicht mit Flex-Boxen, obwohl in letzter Zeit mehr und mehr Menschen, die sie verwenden, würde ich nur divs machen, die aneinander nächsten ausrichten, dass die Art und Weise Sie eine CSS-Box erstellen können, hat die gewünschte Breite: sagen Sie 100% oder 50%, oder stellen Sie es einfach auf "auto". Dann verwende display: Inline-Block; und schweben: links; auf den Kisten; Auf diese Weise können Sie ein schönes Layout haben und es reagiert.

Beispiel:

.box1 { 
     width: 49%; 
     height: auto; 
     float: left; 
     overflow: hidden; 
     margin: auto; 
    display: inline-block; 
    } 

.box2 { 
    width: 49%; 
    height: autox; 
    float: left; 
    overflow: hidden; 
    margin: auto; 
display: inline-block; 

}