You Basically Divide your entire screen into columns. These columns have a fixed width.
As you move from one device to another, the number of columns change but their width never changes. You might have 12 col on Desktop, 8 on tablet and 4 on mobile. Most grids have 60-80px(65 recommended) Column width with a Gutter of 20px.
Outer Gutters are also referred as ‘side margins’ ~20-30px
They are different sections of your website. They can have images, text or even a group of different things. Your container need to sit on your columns.
To make sure that you have a consistent vertical rhythm across your UI> There has to be a grid (mostly 8 or 4pt grid) to make sure your spacings are uniform most importantly, sibling elements stay together because your eyes calculate space really quickly.
