Grids shouldn’t be positioned with
bottom. Traditional grids will be based on
float, and modern grids are based on flexbox. Soon many will work with CSS grid.
Since JS typically loads after CSS, you run into issues. The page will initially position based on CSS, and then reposition when JS loads. This causes a jerky movement and is bad UX.
Handling page resizing with JS layouts can be a headache. CSS based media queries are much easier to work with than resize events.
Now you have divided the styling of your page to 2 places which is confusing, especially for developers that may be new to the project
All in all, it should be avoided. This isn’t always possible though, sometimes you need the extra firepower that JS provides. For example, foundation wrote a JS plugin just to equalize the height of divs in their grid: https://foundation.zurb.com/sites/docs/equalizer.html. But since Flexbox came out, this is no longer necessary!
All that being said, I still feel that the
bottom properties are very useful - just not for grids! Specifically used with
position: absolute, these properties can be used to break the page layout and set divs behind and in front of each other. This pen is a good example of this: https://codepen.io/RadDog25/pen/ZvxREQ
I feel like these properties should be in the toolkit of any front end developer, but as @facundocorradini mentioned, you can break things if you don’t have a good handle on how they work!