User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
Steps to reproduce:
(using Firefox Developer Edition)
create any CSS grid layout that contains more items than explicit tracks, causing new implicit tracks to be created.
query that element's styles:
const styles = window.getComputedStyle(element);
check the grid-template-columns or grid-template-rows properties:
const columns = styles.getPropertyValue("grid-template-columns");
the columns returned only accounts for the explicit columns, and does not return the implicit columns that have been created.
This inaccuracy makes it impossible for user-land Grid Inspector/overlay tools to be accurate. Tools like my Grid Critters game, Webflow's Grid Inspector etc. are affected by this.
Firefox has a built-in Grid Inspector that is able to remain accurate because it doesn't use these values, but rather the privileged element.getGridFragments() method, which does account for both explicit and implicit values.
the grid-template-columns should return all the columns, not just the explicit ones. That is the behavior in Chrome, Edge, and Safari.
The same applies to the grid-template-rows value.