Aligning to the underlying grid

What is the best way to align elements to the underlying 12 column grid? It seems like the only thing that automatically snaps to the underlying grid, is the actual ‘Grid,’ element, or other elements that have been assigned the Grid display. What is the difference between these two approaches, and why would someone assign ‘Grid’ to a Div block, or column, when the Grid element is available?

Columns and Div blocks seem to just evenly split their containers. What’s the best practice for aligning everything within elements to the grid, without ignoring the underlying columns and gutters?