Make column of width 9 fill entire width if no other columns

Question

Using Foundation 6, I have a large-3 column to the left of a large-9 column. This is great, except under certain circumstances the large-3 column may not be there. In this case I would like the remaining column to fill the entirety of the row, i.e. behave as if it was a large-12 column instead. I feel like this sort of thing should be supported natively by Foundation somehow, but couldn't see anything about it in the docs, and am at a loss as to how I'd achieve it manually.

Answer 1

TL:DR; - Foundation doesn't supports this feature, but I've read your question and there are some possible solutions:

1. what controls the large-3 columns's presence? if it's via some sort of script / query (PHP/Python) you can echo the relevant div. for example:

   if (some_condition === true) {
       echo '<div class="large-3 columns">...</div>';
       echo '<div class="large-9 columns">...</div>';
   } else {
       echo '<div class="large-12 columns">...</div>';
   }
   

2. if you need to hide it in certain resolutions you can use the grid's built in functionality:

   <div class="row">
     <div class="large-3 show-for-large columns"><!-- ... --></div>
     <div class="large-9 medium-12 columns"><!-- ... --></div>
   </div>
   

3. you can remove / add the div via jQuery's remove() method:

   $( ".large-3" ).remove();
   

I hope that it helped. anyway, feel free to add code so we can assist more.