没有位置参数的 zen 网格项目答案

【问题标题】：zen grid item without position argument没有位置参数的 zen 网格项目
【发布时间】：2013-05-14 05:24:16
【问题描述】：

我正在尝试使用zen grids 为我正在使用zen starter 主题开发的新drupal 网站。假设我有一个5 列网格，其中包含一个无序列表，其中包含5 个列表项。在我的 scss 文件中，我想说让每个 <li> 宽一列，第一个列表项没有左边距，最后一个列表项没有右边距。

我已经查看了 zen-grid-item 和 zen-grid-flow-item mixin，但我无法做到这一点。谁能给我一个简单的例子？这是一些示例标记

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

ul {
  $zen-column-count: 5;
  $zen-gutter-width: 30px;
  @include zen-grid-container;
  li {
    /* Not sure what to put here to make each <li> 1 column wide */
  }
}

【问题讨论】：

你可能会尝试包含zen-grid-flow-item() mixin。像 zen-grid-flow-item(1,5) 这样的东西可能会起作用，但你必须阅读关于排水沟和浮动一点的内容。
如果由于某种原因这对您不起作用，您可以尝试制动 li 选择器，并在第一个 zen-grid-item( 1, 2) 在第二个中，依此类推...作为一个不那么优雅但安全的替代方案 ;-)

标签： drupal drupal-7 grid sass drupal-zen

【解决方案1】：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

ul {
  $zen-column-count: 5;
  $zen-gutter-width: 0;
  @include zen-grid-container;

  background: #eee;

  width: 70%;
  margin: 0 auto;
  li {
    @include zen-grid-flow-item(1, 5);
    @include zen-float(left);
    height: 100px;
    border: 1px solid #fff;
  }
}

【讨论】：