CODEWITHSUNDEEP
htmlcsszurb-foundation
aurrutia
aurrutia

Reputation: 77

Foundation XY grid full width for some cells

I am wondering wether is possible to set full width for some cells on Foundation 6.5 XY grid.

I am aware that the grid-container can be set to be fluid or full but my intention is to within one grid container to set some cells to be full width.

 <div class="grid-container">
  <div class="grid-x">
    <div class="cell small-12">
      Contained cell.
    </div>
    
    <div class="cell small-12 full-width-possible">
      Full width cell possible?
    </div>
    
    <div class="cell small-12">
      Contained cell.
    </div>
  </div>
</div>

I didn't find any other option than creating a separate full container.

Any ideas?

Upvotes: 1

Views: 2372

Answers (2)

rafibomb
rafibomb

Reputation: 535

By using .small-12, you are setting a cell to be 100% width.

So for fluid width I'd suggest you only wrap your cell that need to be contained in a .grid-container and the fluid ones without a grid-container.

Upvotes: 1

dom_ahdigital
dom_ahdigital

Reputation: 1681

I think what you want is to have a nested cell a container with a width edge to edge of the viewport whilst its container remains at 1200px wide (of whatever Foundation default is).

An option you could try is using offsets. E.g.

HTML

<div class="grid-container full">
  <div class="grid-x">
    <div class="cell small-10 small-offset-1">
      Contained cell.
    </div>
    <div class="cell small-12">
      Full width cell possible?
    </div>
    <div class="cell small-10 small-offset-1">
      Contained cell.
    </div>
  </div>
</div>

Example result

enter image description here

Upvotes: 2

Related Questions