Foundation Grid Example

An example of the foundation grid with the min/max width set to 960. Both of these values can change depending on the requirements of the layout.

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin-top:20px}
        .columns{background:#ccc;padding:10px 0;margin-bottom:5px; text-align:center;font:10px/1.625 Helvetica,Arial,sans-serif}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="twelve columns">12</div>
        </div>
        <div class="row">
            <div class="six columns">6</div>
            <div class="six columns">6</div>
        </div>
        <div class="row expanded">
            <div class="small-12 columns"><button>
            sdsfa
            </button></div>
        </div>
        <div class="row">
            <div class="two columns">2</div>
            <div class="two columns">2</div>
            <div class="two columns">2</div>
            <div class="two columns">2</div>
            <div class="two columns">2</div>
            <div class="two columns">2</div>
        </div>
    </div>
</body>
</html>

CSS

/* Grid */
.container{padding:0 20px}
.row{width:100%;max-width:960px;min-width:960px;margin:0 auto}
.row .row{min-width:0}
.column,.columns{margin-left:4.4%;float:left;min-height:1px;position:relative}
.column:first-child,.columns:first-child {margin-left:0}
.row .one.columns       {width:4.3%}
.row .two.columns       {width:13%}
.row .three.columns     {width:21.68%}
.row .four.columns      {width:30.37%}
.row .five.columns      {width:39.1%}
.row .six.columns       {width:47.8%}
.row .seven.columns     {width:56.5%}
.row .eight.columns     {width:65.2%}
.row .nine.columns      {width:73.9%}
.row .ten.columns       {width:82.6%}
.row .eleven.columns    {width:91.3%}
.row .twelve.columns    {width:100%}
.row:before,.row:after,.clearfix:before,.clearfix:after{content:"";display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}