问题
I would like to start with the Skeleton CSS boilerplate from http://getskeleton.com/ It's the first time I have designed and scripted with a 960gs template, and I totally don't get it.
According to a few tutorials, I understand that width of the page consists of 16 column units. For example, you can divide your page into ten-unit column and a six-unit column:
I took the following code straight away from the skeleton layout.css:
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
The problem is that I would like to divide my page into 5 parts (with margin, of course)... But how? I could use three columns 5 times, but that would count up to a total of 15 columns. Is there any way to do this?
回答1:
These are the best tutorial series for Skeleton I have found. They really helped me: https://www.youtube.com/watch?v=QFYkSqBvCAs
However, if you go to the Skeleton homepage there is a grid system demo on there. Just inspect the source, which gives you:
<div class="five columns alpha">Five</div>
Hope this helps :)
回答2:
You won't be able to get five columns from the standard skeleton version 1.2. BUT you could add some lines to skeleton.css:
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
.container .one-fifth.column { width: 176px; } /* <--- Right here */
Skip down to here:
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.alpha.omega { margin-left: 0; margin-right: 0; }
.container .one.column,
.container .one.columns { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
.container .one-fifth.column { width: 137.6px; } /* <--- And Right der */
}
I omitted some lines btw. Then just throw in one of these:
<div class="column one-fifth alpha">1</div>
<div class="column one-fifth">2</div>
<div class="column one-fifth">3</div>
<div class="column one-fifth">4</div>
<div class="column one-fifth omega">5</div>
And done, will add example in the near future. Personally I think 5 column grids are just too narrow and stay away from anything above 4 column when possible.
回答3:
Thought I'd update this with my solution.
For the new Skeleton framework (currently V2.0.4) with percentage based widths, I was experimenting and found adding this worked for me.
.col-5.columns {
width: 16.3333333333%;
padding-right: 10px;
}
Just add this in place of the normal column classes e.g.,
<div class="col-5 columns">
The padding is just a preference for my particular case.
Haven't found any problems with it yet though.
来源：https://stackoverflow.com/questions/11374652/how-do-i-divide-the-skeleton-css-boilerplate-into-5-columns