Menu icon Foundation
Using .expand other than for buttons..

Would this be okay?

<div class="row">
    <div class="expand column">
        <!--Content here-->
    </div>
</div>
            

         

Instead of this...

<div class="row">
    <div class="small-12 medium-12 large-12 column">
        <!--Content here-->
    </div>
</div>
            

         

I did try it and it seems to work but should it be used? I do understand that this can only be used if you want the content to expand 100%.

Thanks

expandrow

Would this be okay?

<div class="row">
    <div class="expand column">
        <!--Content here-->
    </div>
</div>
            

         

Instead of this...

<div class="row">
    <div class="small-12 medium-12 large-12 column">
        <!--Content here-->
    </div>
</div>
            

         

I did try it and it seems to work but should it be used? I do understand that this can only be used if you want the content to expand 100%.

Thanks

Karl Ward over 5 years ago

I am not sure why you would need to use expand in the first place? By default, a row with a single column will wrap at 100% width anyway (with added padding). There is another class .collapse that can be added to prevent added padding.

The expand class is used to set the width of a button to 100%. div elements by default will take 100%, so I don't think it is needed.

Chris Oswald over 5 years ago

Ya know.. I never thought of it that way. So If I'm correct this would do just fine...

<div class="row">
     <div class="column">

     </div>
</div>

but only if there is one column.

Karl Ward over 5 years ago

The whole point of columns, is to distribute them amongst the parent rows total space. The rows total space is always 100% of its parent container. A single column will therefore always be 100% wide (unless using offsets), and multiple columns would be distributed.

If I was you, I would stick to the following just to stay formal:

<div class="row">
     <div class="small-12 columns">

     </div>
</div>

Why small-12? Because small-12 means you want the column to fill 12 column-spaces on small screens and up ... no need to duplicate that behavior for higher breakpoints if they are identical. Having said that, yes I think you can use the code from your last post also.

Rafi Benkual over 5 years ago

@karl is correct. Expand does nothing because .expand is style only set to buttons. There is no need for it in rows. If you want a 12 column row the either the way Karl provided works or if you do not specify a column width, the default is 12 in a row.