The grid system

Foundation comes with a grid system that, by default, divides your working screen real estate into 12 columns. Using classes, you specify for every block on the screen how many columns wide you want it to be. There are different classes for different sizes; this is the Foundation way to make responsive design easy.

Imagine a variety of screens and devices you want your website to look great on. Let's look at the larger ones and call them a canvas for a moment. Picture two vertical lines, about 1024px apart, centered on the canvas. These will be the vertical borders of our working area. Of course, once you reduce the size of your viewport, or if you are using a tablet or mobile, your working area is going to be the full width of your screen.

Now, to build the layout of our web page, we are going to divide it into horizontal rows, inside which, we will place responsive blocks (<div>) of content. For those, there are classes we can use, indicating what size screen...