Behalten Sie das Seitenverhältnis von Elementen innerhalb eines flüssigen CSS-Grid-Layouts bei

-1

Ich habe eine Liste von div-Elementen in einem 4-spaltigen CSS-Grid-Layout. Die div-Elemente sind auf 100% Breite eingestellt, mit einem Füllgrad von 100%, um ein Seitenverhältnis von 1: 1 beizubehalten. Dies ist eine gängige Technik, wie hier zu sehen ist: https://stackoverflow.com/a/6615994/7949834 Behalten Sie das Seitenverhältnis von Elementen innerhalb eines flüssigen CSS-Grid-Layouts bei

Das funktioniert in Firefox, aber nicht in Chrome. In Chrome nehmen die Elemente innerhalb des Gittercontainers keinen Platz ein. Was ist der Grund dafür?

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 5%; 
 
    grid-template-columns: auto auto auto auto; 
 
    list-style-type: none; 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

https://jsfiddle.net/ab0asum3/

Quelle

2017-10-11 blacklight

Es erscheinen zwei Ausgaben sein:

auto für grid-template-columns kein gültiger Wert ist - verwenden etwas wie 1fr
für den grid-gap einen Prozentwert zu verwenden, wenn keine explizite Höhe hat für die li definiert oder div

Sie müssen einen Pixelwert für die Zeilenlücke verwenden.

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 10px 5%; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

Quelle

2017-10-11 23:21:31

Ich denke du hast das geschafft. Vielen Dank. – blacklight

Ich lerne immer noch CSS Grid selbst, also könnte ich mich irren. Die Verwendung von Prozentwerten auf anderen Elementen ohne eine explizit definierte Höhe ist normalerweise problematisch. Und es scheint das Problem hier zu beheben. –

-1

Wenn Sie die Chome DevTools öffnen und inspizieren die divs Sie werden sehen, dass der Browser als 0px ihre Höhe zu berechnen. Ich kann nicht genau sagen, welche Macke oder welchen Standard Sie hier brechen, aber wenn die verschachtelten divs keine Höhe haben, werden sie nichts auf ihrem Elternteil vererben lis und Sie werden nichts angezeigt haben.

Der Grund ist, dass Chrome li wirdNullhöhe haben die nested div mit Nullhöhe, was wiederum bedeutet, hat das Mutter. Das ist dein Grund.

Quelle

2017-10-11 22:57:55 worc

Firefox und Chrome berechnen das verschachtelte Div mit Null Höhe. Aber die effektive Höhe sollte auch ein Ergebnis der Auffüllung sein, die Firefox berücksichtigt, Chrome nicht. Ich bin mir nicht sicher, welche Implementierung hier korrekt ist. Danke für den Kommentar. Ich bin mir nicht sicher, warum du abgelehnt wurdest. – blacklight

es ist ein seltsamer Randfall, vielleicht ist der Drive-by-Downvote nur nicht damit vertraut. Vielleicht möchten Sie nach Rendering-Regeln für FF und Chrome suchen und herausfinden, warum sie sich bei den Widersprüchen im Bereich padding/zero-height unterscheiden. – worc

sollten Sie 1fr anstelle auto Größe Ihrer Spalten:

ul { 
 
    border: 2px solid red; 
 
    display: grid; 
 
    grid-gap: 5%; 
 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
 
    list-style-type: none; 
 
} 
 

 
li:nth-child(4n)~li { 
 
    /* eventually for the gap missing in chrome */ 
 
    margin-top: 5% 
 
} 
 

 
div { 
 
    background-color: green; 
 
    padding-top: 100%; 
 
    width: 100%; 
 
}

<ul> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
    <li> 
 
    <div></div> 
 
    </li> 
 
</ul>

N Hinweis: für die Square-Technik, im Gegensatz zu Flex kann es aus dem Raster Kind gemacht werden und es können Sie div mit Inhalt zu füllen und es zentrieren Beispiel https://jsfiddle.net/ab0asum3/4/

Quelle

2017-10-11 23:22:07

Behalten Sie das Seitenverhältnis von Elementen innerhalb eines flüssigen CSS-Grid-Layouts bei

Antwort

Verwandte Themen