Menu icon Foundation
Three even columns with custom gutter

Hello All, 

 

I was wondering if someone could help me out I would like to create the layout in the image attached below. I have created this code but it seems like the columns have some padding on the left and right hand side. I would like for the columns to stretch to fit the whole 10 columns without right or left padding. I would however like the middle columnto have some space on both side like the image attached. I appreciate the help. Layout I would like to achieve

 <div class="row expanded">
    
        <div class="large-10 columns large-centered test-wrapper">
        
            
            <div class="row expanded">
            
            
                <div class="large-4 columns test-column">
                
                
                
                </div>
                
                
                <div class="large-4 columns test-column">
                
                
                
                </div>
                
                
                <div class="large-4 columns test-column">
                
                
                
                </div>
                
                
            
            </div>
            
    
    
        </div>
    
    
    </div>

columnsResponsivemargingutterspace

Hello All, 

 

I was wondering if someone could help me out I would like to create the layout in the image attached below. I have created this code but it seems like the columns have some padding on the left and right hand side. I would like for the columns to stretch to fit the whole 10 columns without right or left padding. I would however like the middle columnto have some space on both side like the image attached. I appreciate the help. Layout I would like to achieve

 <div class="row expanded">
    
        <div class="large-10 columns large-centered test-wrapper">
        
            
            <div class="row expanded">
            
            
                <div class="large-4 columns test-column">
                
                
                
                </div>
                
                
                <div class="large-4 columns test-column">
                
                
                
                </div>
                
                
                <div class="large-4 columns test-column">
                
                
                
                </div>
                
                
            
            </div>
            
    
    
        </div>
    
    
    </div>
Harout almost 3 years ago

@Rafi Benkual any ideas?

Daren Barry almost 3 years ago

See docs at: http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

 

here's 2 ways to do it

 

<div class="row">   
    <div class="small-12 columns">
        <div class="small-12 large-4 columns">
       
        </div>
        <div class="small-12 large-4 columns">
       
        </div>
        <div class="small-12 large-4 columns">
       
        </div>
    </div>

    <div class="small-12 columns">

    </div>
</div>

<!-- OR -->

<div class="row">
    <div class="small-12 columns">
        <div class="small-12 large-4 columns">
       
        </div>
        <div class="small-12 large-4 columns">
       
        </div>
        <div class="small-12 large-4 columns">
       
        </div>
    </div>
</div>

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

    </div>
</div>

Harout almost 3 years ago

@darrenbarry thanks for the reply but that is not what i am looking for. please refer to attached image. 

Daren Barry almost 3 years ago

I see the image... Im not sure why you're using a 10 grid system.... if you're using a 12 THEN 10 w/ in that 12 AND you want thirds... we'll, you'll have to write custom css to capture 33% of that 10 wide field. try this:

 

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

        <div class="small-12 large-10 columns">
            <div class="small-12 large-4 columns">

            </div>
            <div class="small-12 large-4 columns">
          
            </div>
            <div class="small-12 large-4 columns">
          
            </div>
        </div>

        <div class="small-12 columns">

        </div>

        <div class="small-12 large-2 columns">
            <!-- here's your 2 wide that's not in your description... but needed when using 10 out of 12 of foundations width -->
        </div>
    </div>

   
</div>

Harout almost 3 years ago

I am using large-10 columns large-centered becuase thats how wide i want it. The code above doesnt give me the output i want. my code already was in 4 columns. i would like to have a 10 column wrapper and have three columns in that wrapper that fills the whole wrapper, but i also want a gutter space on both the left and right hand side of the middle column exactly like the picture. 

Daren Barry almost 3 years ago

So, did you download a special version of F with a 10 grid system (instead of the normal 12)?

 

If you didn't ...

 

I hear what you're saying... the 3rd line in my code, offers you your 10 wide grid (while using F's 12 grid system)... then next 3 divs offer you your 3rd (of the 10 wide) grid... just like pictured :). hope it helps

Harout almost 3 years ago

hey @darenbarry thanks for the help again, but this isnt what i was looking for.

Val Ery almost 3 years ago

 Hi!

This example is suitable? http://codepen.io/Val_Ery/pen/VjorqG

Harout almost 3 years ago

@ValEry Thank you for the reply, this is exactly what i am looking for, but why is  it not stacking on mobile even if it says small-12 columns?

Val Ery almost 3 years ago

Hi!
No change because behavior blocks for different screens are not described. Layout is based on a picture. The behavior of the blocks is the same for all screens.

If this marking is only needed for large screens, then you just have to replace all of the classes with the "small-" to "large-". If for medium screens - is replaced by "medium"

Specifying for the blocks "large-4 columns" means that the three columns will only be shown on big screens. On medium and small - will be three rows in the entire width of the parent block.

P.S. I changed the example: replaced classes on the "medium" and added a separator between blocks (margin in css rules) for small screens.

See ... http://codepen.io/Val_Ery/pen/VjorqG

Sorry for my Google-English (it's not my native language)

Harout almost 3 years ago

@ValEry Thank you very much! I really appreciate it :) 

Val Ery almost 3 years ago

Harout!

I was glad to help! :)