Es gibt viele Grids im Web, die so aussehen
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Meine Botschaft ist, dass sie eigentlich sein sollten
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
}Warum? Im ersteren Fall ist die minimale Breite der Grid-Spalte min-content, was unbeholfen breiter sein kann, als Sie es sich wünschen (siehe: Grid-Blowouts). Im letzteren Fall haben Sie das Minimum auf 10px reduziert (nicht null, damit es nicht verschwindet und zu weiterer Verwirrung führt).
Obwohl es leicht bedauerlich ist, dass dies notwendig ist, führt die Anwendung zu einem besser vorhersehbaren Verhalten und verhindert Kopfschmerzen.
Das ist alles. Das ist meine ganze Botschaft.
(Blog-Post-Format von Kilian’s „Sie wollen overflow: auto, nicht overflow: scroll“, was ebenfalls stimmt.)
Danke für den Tipp! ⚡
Ich verstehe. Interessante Idee. Bei welchem Punkt tritt bei Ihnen ein Blowout mit dem ursprünglichen Code auf?
Das geht in das
Ich frage hier statt auf der Blowout-Seite, nur für den Fall, dass der Traffic hier eine Antwort bringt. Gibt es eine Möglichkeit, einen Blowout auszulösen? Insbesondere basierend auf der Zeilenposition? Es gibt ein Layout, das ich erreichen möchte und das mir bisher nicht gelungen ist. Ich habe zwei Komponenten
Bild mit fester Breite. Es kann auf die Viewport-Breite schrumpfen, aber ich möchte nicht, dass es in einem mehrspaltigen Grid schrumpft.
Dynamischer Textinhalt/dynamische Breite. Es kann sich zum Viewport fließen/umbrechen, aber ich möchte nicht, dass es in einem mehrspaltigen Grid umbricht.
Ich möchte dieses Layout ohne Media-Query erreichen, wenn möglich, aufgrund der dynamischen Natur der zweiten Komponente.
Die gewünschten Layouts sind
Breit genug für mehrere Spalten, mit einem Abstand von minmax(20px, 1fr) versehen, jede Komponente bündig mit dem jeweiligen Container-Rand
Zu schmal für mehrere Spalten, jede Komponente zentriert
Dies scheint mit Grid oder Flex erreichbar zu sein, aber ich habe nach... vielen verschiedenen Ansätzen aufgegeben.
Ich bin mir nicht sicher, ob das Auslösen eines Blowouts dies erreichen könnte, aber es fühlt sich möglich an? Ich habe auch versucht, Spalten zu wiederholen, was vielversprechend war, aber ich konnte keine Möglichkeit finden, die Größenbeschränkungen der Komponenten wie angegeben beizubehalten.
Wenn jemand eine Lösung hat, kaufe ich Ihnen ein Bier!