Corretta implementazione della griglia CSS in Firefox e Chrome

Come concluso qui , la griglia CSS implementa gli elementi di uguale altezza tra le righe usando le grid-auto-rows: 1fr . Tuttavia, Chrome e Firefox manifestano comportamenti diversi quando si inseriscono righe con un’altezza impostata su auto tra le file di uguale altezza. Ovvero, Chrome raggiunge un’altezza uguale su tutte le righe quando si utilizza la grid-auto-rows: auto 1fr 1fr 1fr esplicita grid-auto-rows: auto 1fr 1fr 1fr syntax ma solo uguale altezza su una base per riga quando si usa repeat come grid-auto-rows: auto repeat(3, 1fr); mentre Firefox raggiunge solo un’altezza uguale su base per riga indipendentemente.

Si prega di osservare quanto segue sia in Firefox che in Chrome:

https://codepen.io/Hlsg/pen/eemRmm

https://codepen.io/Hlsg/pen/jGWQwM

È interessante notare che entrambi si comportano allo stesso modo con questa implementazione, quindi penso che questo abbia più a che fare con la loro implementazione della css repeat di css repeat :

https://codepen.io/Hlsg/pen/VWKPzq

Qual è la tua opinione su questo e quale browser pensi abbia l’approccio standard corretto?

È interessante notare che entrambi si comportano allo stesso modo con questa implementazione, quindi penso che questo dipenda più dalla loro implementazione della repeat del css.

Penso che tu abbia ragione.

Se si guarda la definizione della specifica per grid-auto-rows e grid-auto-columns , la notazione repeat() non sembra essere un valore accettabile.

La definizione dice che solo le dimensioni delle tracce sono valori accettabili. E la definizione di “dimensione della traccia” non include repeat() .

Pertanto, una violazione delle specifiche o, almeno, un linguaggio delle specifiche non chiaro, può portare a diverse implementazioni del browser.

https://www.w3.org/TR/css3-grid-layout/#auto-tracks