zen grid item without position argument

Question

I'm experimenting with zen grids for a new drupal site I'm working on using the zen starter theme.. let's say I have a 5 column grid with an unordered list that has 5 list-items in it. In my scss file I want to say make each <li> one column wide with no left-margin on the first list-item and no right-margin on the last list-item.

I've looked at the zen-grid-item and zen-grid-flow-item mixins but I haven't been able to accomplish this. Anyone able to give me a quick example? here is some sample markup

<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 */
  }
}

You might try some luck with including the [zen-grid-flow-item()](http://zengrids.com/help/#zen-grid-flow-item) mixin. Something like zen-grid-flow-item(1,5) might work, but you have to read about the gutters and floating a little. — Martin Turjak, May 14 '13 at 09:28
If this for some reason won't work for you, you could try braking the li selector up and including zen-grid-item(1, 1) in the first, zen-grid-item(1, 2) in the second, and so on ... as a not so elegant but fale safe alternative ;-) — Martin Turjak, May 14 '13 at 09:37

score 0 · Answer 1 · answered Aug 29 '13 at 13:54

<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;
  }
}

zen grid item without position argument

1 Answers1