How do you choose how many columns to give a div class?

In my understanding you take the width of your whole website (or your container-element) and set it as = 100%. each grid-element will be this big: (total width in pixel / total number of grids = size of 1 grid element in pixels).

Than again you convert it to percentages: (total width in percentages / total number of grids = size of 1 grid element in percentages).

Dont forget to add margins (and subtract these from your grid-element sizes)

To decide how many grid elements you'll use is up to you. if you got a small contained website (~1000px) i wouldnt go over 15 grid elements. if your max-width is bigger you can take more elements in, which results in more and smaller grid steps.

Best Regards, Nikos

Going off what Nikos said, the number and the width of columns can be anything, as long as the width of all the columns added together does not exceed your desired page width. This website, css grid generator, does a good job illustrating this relationship.

To answer your questions, no, each column does not take up a certain number of pixels unless the grid code has already been written. In the Smells Like Bakin' website, the grid is divided into twelve, 65 pixel wide, columns, therefore 9 columns would take up roughly three quarters of the page (other factors such as margins and gutters can be involved in the exact percentage of the page).

Lastly, the number of columns any given element or class occupies is the discretion of the creator and is usually based of aesthetic, practical, and stylistic considerations. You would want a menu-bar to span the entire width of the page so you would have it occupy every column. On the other hand, you might want the logo to only appear at the top right corner and thus you would reduce the number of columns it occupies.