When you click the "grid" icon, what do the red vertical lines and bars represent?
I assume that the center line is the center of the page, but what do the outer red lines and red bars represent?
The outer lines represent the edges of an iPhone or iPad.
They're for helping you make scrolls that look good on mobile (Androids tend to be wider, so if you design for the iPhone it should be pretty good on other devices). Basically, things that fall outside the lines will be cut off on an iPhone.
The bars down the middle are based on the 960-grid system. http://960.gs/ They can help you divide up the space you have, and objects snap to them while dragging, which can make alignment easier.
The bars are 60px wide, with 10px of space in between each of them. The faint horizontal lines (which objects also snap to) have a distance of 30px between them.