Question

如何制作超过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>

Answer 1

您只需使用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>

Answer 2

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

Answer 3

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

在另一个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列的网格，我可以放在任何地方，而不会覆盖项目中基础的默认值。

Answer 4

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

我们假设您将字母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;
}

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

4 个答案: