to shrink content AND distribute extra space all the way down to 390px (or whatever) AND have columns break when element can't be at least 390px (or whatever) change default WordPress CSS grid declartion to:   
       
         grid-template-columns: repeat(auto-fit, minmax(390px, max-content));
        justify-content: center; 
        
PROBLEM: The Grid elements do not shrink below 390px (and so we get overflow). To forece element to shrink when screen gets below 390px (or whatever) you can either:
       
Solution 1- this works on 90% of all layouts AND IS WORDPRESS DEFAULT ON GRID (only doesn't work if you are forced to have a max-width on an element, say an image that is too small--in that case, see Solution 2 below) change above grid declaration to: 
       
       grid-template-columns: repeat(auto-fit, minmax(min(390px, 100%), 1fr))
       --says grid element can't be EITHER 390px(or whatever) OR 100% (of the grid parent element), whichever is SMALLER. So element continues to squish when screen gets to 390px(or whatever)
       
        
Solutions 2: If, for some reason small images look too blurry when they stretches all the way across the screen, so that you've ut a max-width on them or their parent, then to FORCE a grid element to shrink AND distirubte it's empty space when screen goes below 390px (or whatever)
        
       a) use a media query at 390px (or whatever) and reset "grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr));" (here justify-content: center has no effect) 
       
      b) OR you can simply set grid-template-columns: none; and add "justify-content: center" (which now has an effect) on the grid parent and single grid element extra space distributes center