Horizontal center cell in xy grid

I want to center a cell horizontally in a grid-x. p.ex. I could do it using offset like “cell large-6 large-offset-6” but this seems not to be the correct way (especially for an even column size). I can not find something like “centered” in the XY-Grid docs.

<div class="grid-container">

  <div class="grid-x grid-padding-x">
<div class="large-6 large-offset-3">
  <p class="callout">This content is offset by two columns  and is centered if the content is wide enough to span over 6 columns. So 3-offset + 6 content + 3 unused equals 12 columns.</p>
</div>
  </div>


  <div class="grid-x grid-padding-x">
<div class="large-3"><i>nothing here</i></div>
<div class="large-6">Content spans 6 columns in the middle. The first 3 columns contain nothing as do the last 3 columns.</div>
<div class="large-3"><i>nothing here</i></div>
  </div>
<hr>

<div class="grid-x grid-padding-x">
  <br><br>
  <h4>Using a Table would look like this:</h4>

<table>
  <tr><th width="25%">3-offset</th>
      <th width="50%">6-content</th>
      <th width="25%">3-empty</th>
  </tr>
  <tr><td></td>
    <td>This content is offset by two columns  and is centered if the content is wide enough to span over 6 columns. So 3-offset + 6 content + 3 unused equals 12 columns.</td>
    <td></td>
    </tr>
</table>
</div>

Thanks for you suggestions. The table-example is cheating in my eyes and does not use the capabilities of foundation.

I already mentioned using “offset”, but how do you center a 5-column wide cell?

Either by creating a custom class with the right values or by changing to a grid with 15 or more columns.

@DanielRuf hmm so you say the centering capability of flex-grid aka row align-center is not available in xy-grid ?

I think so, I didn’t check it further.

I think we have an elegant solution:

<div class="grid-x grid-padding-x">
<div class="cell auto">Left Side</div>
<div class="cell medium-5">Stuff in the Center. Stuff in the Center. Stuff in the Center. Stuff in the Center. Stuff in the Center.</div>
<div class="cell auto">Right side</div>
</div>

The use of “auto” fills up the remaining space in the grid, so you have an auto cell on each side of the centre cell which holds your content. You can change the size of the centre cell to suit your needs. Hope this solves your issue.

1 Like