Holy shit this is absolutely fantastic.
One of the most frequent, confusing conversations w/ designers is “No, the pink lines that overlay design comps aren’t all that helpful for how things actually work in the browser.”
Grid and layout might be the facets of web design that best highlight the fundamental brokenness of the “developer hand-off” bullshit waterfall process. How layout plays out in code is fundamentally different than in vector design tools, and that needs to be recognized.
Q: Well then, what’s the solution?
A: Actual collaboration and communication between designers and developers. I always welcome the opportunity to share mine and Dan Mall‘s Hot Potato Process.
Layout techniques — especially around CSS Grid — is an area where developers are better equipped to lead (or at least participate in) design efforts. Designers and front-end devs should be equal partners in creation process with a solid two-way flow between them.
I can harp on about this all day, but I have work to do. But seriously, throw your transparent pink 12-column grids in the trash can.
(Note: this is me transferring a tweet thread over to my site.)