auto-fill/gap bug

[Gunnar Bittersmann]

Grid, soviele Items mit Mindestbreite nebeneinander wie hinpassen, aber immer eine gerade Anzahl von Spalten, also:
grid-template-columns: repeat(auto-fit, minmax(4em, 1fr) minmax(4em, 1fr));

Geht in Firefox 58 und 59 noch gar nicht, aber das soll hier nicht das Thema sein. Sondern:

Sobald grid-gap im Spiel ist, schieben Safari und Chrome bei gewissen Viewportbreiten die Items nach rechts raus anstatt 2 Spalten weniger zu machen. ☞ Codepen

Der einzige, der’s richtig macht, ist – tadaa – Edge.

Hat jemand eine andere Erklärung dafür außer dass es sich um einen Bug in WebKit/Blink handelt?

LLAP 🖖

[Bernd]

Zu dem Fehler kann ich nichts sagen, aber schau mal wie der Opera Neon den Code darstellt

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Grid, soviele Items mit Mindestbreite nebeneinander wie hinpassen, aber immer eine gerade Anzahl von Spalten, also:
grid-template-columns: repeat(auto-fit, minmax(4em, 1fr) minmax(4em, 1fr));

Geht in Firefox 58 und 59 noch gar nicht

Ist dort seit Ewigkeiten bekannt: Bug 1341507 - [css-grid] grid-template-rows / grid-template-columns does not recognise multiple values within repeat() notation when used with auto-fill

Sobald grid-gap im Spiel ist, schieben Safari und Chrome bei gewissen Viewportbreiten die Items nach rechts raus anstatt 2 Spalten weniger zu machen.

Da kam mir jemand knapp zuvor: Bug 182922 - Incorrect calculation of repeat() with multiple values, auto-fill and grid-gap

LLAP 🖖