-1

I'm trying to determine the best practices for using grid-x "rows" in Foundation 6 XY grid.

Specifically, is there a good rule of thumb for when I should create a new grid-x "row" vs. putting multiple single element cells in a single grid-x "row" (I keep using quotes because they're not technically rows in XY grid).

It seems straight forward when I need to align multiple "column" cells in the same row (e.g., if I want two "columns" side-by-side), but what about when I'm basically stacking single element "rows" (e.g., an h1, a paragraph, another paragraph, etc.)? Should I put those elements in individual cells in individual grid-x elements...

<div class="grid-x">
  <div class="cell">
    <h1>Text</h1>
  </div>
</div>
<div class="grid-x">
  <div class="cell">
    <p>Text</p>
  </div>
</div>
<div class="grid-x">
  <div class="cell">
    <p>Text</p>
  </div>
</div>

Or should I put them in a single cell...

<div class="grid-x">
  <div class="cell">
    <h1>Text</h1>
    <p>Text</p>
    <p>Text</p>
  </div>
</div>

This is just an arbitrary (and somewhat absurd) example, but what is a good rule of thumb for when a new grid-x should be used?

TylerH
  • 20,799
  • 66
  • 75
  • 101
user4487338
  • 78
  • 1
  • 6

1 Answers1

1

It is fine to wrapp cells in .grid-x container instead of .row when you need to separate cells, for example when you use centralised half-width cells and don'w want them to jump in the same row:

<div class="grid-container">

  <div class="grid-x grid-padding-x grid-padding-y centralise">
    <div class="cell small-12 medium-8 large-6">
      .. centralised content ...
    </div>
  </div>

  <div class="grid-x grid-padding-x grid-padding-y centralise">
    <div class="cell small-12 medium-8 large-6">
      .. centralised content ...
    </div>
  </div>

  <div class="grid-x grid-padding-x grid-padding-y">
    <div class="cell small-12 medium-8 large-6">
      .. not centralised content .. (will be placed on the left half of the row on large display)
    </div>
    <div class="cell small-12 medium-8 large-6">
      .. not centralised content .. (will be placed on the right half of the row on large display)
    </div>
  </div>

</div>

<style>
grid-x.centralise {
  justify-content: center;
}
</style>

If you don't need to separate content into responsive grid sections then you use a single cell just to keep consistent container's margin and padding provided by the Zurb Foundation framework.

Boštjan Biber
  • 444
  • 3
  • 12