Since I know the base font-size for my grid headers/footers (I set it in CSS), I can rather easily “mimic” EM, so that is what I am doing. If it zooms up, we just also include the scaling factor in the math. So if I want the column 3 EM, and I know the base font-size is 12 px, the base width would be 3 (for the EM) * 12 (for font-size) * 1 (for conversion factor) = 36 px. If I want to zoom to 150%, it is 3 (for the EM) * 12 (for font-size) * 1.5 (for conversion factor) = 54 px. So far it is working pretty well.
Now the problem is the header or footer line height, at least when some component is in the header or footer. When I set line-height based on my scaling factor (so starting line-height is 25 px, I just multiply my scaling factor by 25px), it looks better, but now the problem is height, and that is set at the element level to 26 px, not at the CSS level. This post comes close. I am still experimenting with this, as it does get pretty close, among other things. Since the height is set at the element level, I sort have to use !important. If I am missing an easier trick, please tell me. Thanks.