How to make a layout of 250x3 columns using skeleton / framework?

Question

I'm now learning responsive webdesign and got stuck on this. My PSD template has 3 columns each with 250 pixels width. The problem is zurb/skeleton framework doesn't have a column width of 250px wide column. The closest column to 250px are the ones below

.container .three.columns { width: 160px; }
.container .four.columns  { width: 220px; }
.container .five.columns  { width: 280px; }

How do I create 250px wide 3 columns using zurb/skeleton?

Columns widths are just a percentage of the container, so they are defined by the total container size (in zurb at least I think). You would need to use .four.columns (33.33%) three times, and change the container width to be 750px Edit: sorry I meant 3*.four columns — Melbourne2991, Jan 13 '14 at 15:35

score 0 · Answer 1 · answered Jan 13 '14 at 15:53

This is with foundation:

Html:

<body>
    <div class="container">
       <div class="row">
           <div class="large-4 columns"></div>
           <div class="large-4 columns"></div>  
           <div class="large-4 columns"></div>  
       </div>
    </div>
</body>

css:

.container {
    width:750px;
}

How to make a layout of 250x3 columns using skeleton / framework?

1 Answers1