One of the most common things you would want to do is center a number of columns, and Foundation makes this really easy. You do this by adding the grid size and then -centered
. So, to center your columns on a small screen, you will add the small-centered
class. The following example shows you how to center eight columns on a small screen:
<div class="row"> <div class="small-8 small-centered columns">3 centered</div> </div>
Basically, it looks the same as how you would declare the small columns, but you just add the extra CSS class small-centered
. If you do not want these columns centered on a large screen, add the large-uncentered
class, as shown in the following code:
<div class="row"> <div class="small-6 small-centered large-uncentered columns">6 centered on small but not on large</div> </div>
As you can start to see, Foundation gives you a lot of control over the grid; let's cover some other grid features.