Check out this foundation JSFiddle I created: http://jsfiddle.net/nycynik/qn8z3cut/2/
When I view it, the layout doesn't resemble tic-tac-toe at all. The right column is aligned to the right, and the sizes of the other columns are all different. I was expecting them all to have the same size.
<body>
<div class="wrapper">
<div class="row">
<div class="small-12 medium-4 large-4 columns yellow_gradient">
<h2>1C</h2>
<p>Rough Diamond</p>
<hr />
<p>Poor Performance<br/>High Potential</p>
</div>
<div class="small-12 medium-4 large-4 columns green_gradient">
<h2>1B</h2>
<p>Future Star</p>
<hr />
<p>Good Performance<br/>High Potential</p>
</div>
<div class="small-12 medium-4 large-4 columns green_gradient">
<h2>1A</h2>
<p>Consistent Star</p>
<hr />
<p>Outstanding Performance<br/>High Potential</p>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 large-4 columns yellow_gradient">
<h2>2C</h2>
<p>Inconsistent Player</p>
<hr />
<p>Poor Performance<br/>Moderate Potential (new role)</p>
</div>
<div class="small-12 medium-4 large-4 columns yellow_gradient">
<h2>2B</h2>
<p>Key Player</p>
<hr />
<p>Good Performance<br/>Moderate Potential</p>
</div>
<div class="small-12 medium-4 large-4 columns green_gradient">
<h2>2A</h2>
<p>Current Star</p>
<hr />
<p>Outstanding Performance<br/>Moderate Potential</p>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 large-4 columns red_gradient">
<h2>3C</h2>
<p>Talent Risk</p>
<hr />
<p>Poor Performance<br/>Limited Potential</p>
</div>
<div class="small-12 medium-4 large-4 columns yellow_gradient">
<h2>3B</h2>
<p>Solid Professional</p>
<hr />
<p>Good Performance<br/>Moderate Potential</p>
</div>
<div class="small-12 medium-4 large-4 columns yellow_gradient">
<h2>3A</h2>
<p>High Professional</p>
<hr />
<p>Outstanding Performance<br/>Limited Potential</p>
</div>
</div>
</div>
</body>