Broken Skeleton grid - 12 and 4 columns

Question

I'm working on my first css framework project based on Skeleton. So far everything went smoothly but it appears that Ive stuck on one thing. Here is the code:

<div class="sixteen columns">
        <div class="clear spacernews"></div>
    </div>

    <div class="twelve columns">
            <div class="four columns newspoint">1</div>
            <div class="four columns newspoint">2</div>
            <div class="four columns newspoint">3</div>

    </div>
    <div class="four columns">
        <h3>Docs &amp; Support</h3>
        <p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
    </div>

THe issue is following - when I have only twelve and four columns it works cool. BUT when I nest those 3x four columns newspoint that grid collapse. Why is that? any ideas?

score 2 · Accepted Answer · answered Feb 13 '14 at 20:19

2

if you need three columns, you have the wrong class. Try one-third column.

Another thing is that if you add columns into columns you have to add alpha and omega to the first and the last columns.

answered Feb 13 '14 at 20:19

polikin

320
1
4

score 0 · Answer 2 · answered Feb 13 '14 at 20:19

Just use "column/columns omega" as wrapper class.

<div class="column omega">
        <div class="four columns newspoint">1</div>
        <div class="four columns newspoint">2</div>
        <div class="four columns newspoint">3</div>
</div>

That will be fine.

Broken Skeleton grid - 12 and 4 columns

2 Answers2