如何制作超过12列的网格?

时间:2013-11-17 22:55:05

标签: zurb-foundation

如何制作超过12列的网格?我想制作一个网格来表示一天24小时半小时的增量(共48列)。

<div class="row display">
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
    <div class="small-2 large-1 columns">1</div>
</div>

4 个答案:

答案 0 :(得分:3)

您只需使用nested Grid即可。

首先,您将row划分为2 columns。比你把12小时放在每个部分:

<div class="row">
    <div class="small-6 large-6 columns">
        <div class="row">
            <div class="small-2 large-1 columns">1</div>
            <div class="small-2 large-1 columns">2</div>
            <div class="small-2 large-1 columns">3</div>
            <div class="small-2 large-1 columns">4</div>
            <div class="small-2 large-1 columns">5</div>
            <div class="small-2 large-1 columns">6</div>
            <div class="small-2 large-1 columns">7</div>
            <div class="small-2 large-1 columns">8</div>
            <div class="small-2 large-1 columns">9</div>
            <div class="small-2 large-1 columns">10</div>
            <div class="small-2 large-1 columns">11</div>
            <div class="small-2 large-1 columns">12</div>
        </div>
    </div>
    <div class="small-6 large-6 columns">
        <div class="row">
            <div class="small-2 large-1 columns">13</div>
            <div class="small-2 large-1 columns">14</div>
            <div class="small-2 large-1 columns">15</div>
            <div class="small-2 large-1 columns">16</div>
            <div class="small-2 large-1 columns">17</div>
            <div class="small-2 large-1 columns">18</div>
            <div class="small-2 large-1 columns">19</div>
            <div class="small-2 large-1 columns">20</div>
            <div class="small-2 large-1 columns">21</div>
            <div class="small-2 large-1 columns">22</div>
            <div class="small-2 large-1 columns">23</div>
            <div class="small-2 large-1 columns">24</div>
        </div>
    </div>
</div>

答案 1 :(得分:2)

您可以在Zurb的this subpage上自定义Foundation,您可以为自己设置48列。然后,您可以使用从.large-1.large-48的大型课程,以及从.small-1.small-48的小班级。

答案 2 :(得分:0)

在寻找类似的东西之后,终于想出了如何用粉底混合物做到这一点。

在另一个scss文件中,您可以按如下方式创建自定义类。这仅实现了&#34; large-x&#34;的编码。此父类的子类。我将total-columns变量重置为12以防万一。

@import "foundation/components/grid"

.customClassName {
  $total-columns:24;
  @include grid-row();
  @include grid-html-classes($size:large);
  $total-columns:12;
}

这给了我一个24列的网格,我可以放在任何地方,而不会覆盖项目中基础的默认值。

答案 3 :(得分:0)

最有可能出现多种解决方案。我试过周杰伦的解决方案,它不起作用 - 不知道为什么?所以我发现了另一种解决方案 - 基金会中有一个可以使用的功能。

我们假设您将字母A-Z作为列表输出:

<ul>
    <li class="grid-26">A</li>
    ...
    <li class="grid-26">Z</li>
</ul>

在您的SCSS中,创建您的类并调用grid-calc函数:

.grid-26 {
    width: grid-calc(1, 26);
}

这将返回宽度等于1/26或3.84615%

打扮SCSS,使每个li浮动,文本居中:

.grid-26 {
    width: grid-calc(1, 26);
    float: left;
    text-align: center;
}