Column mixin outputs strange behaviour.

[Maciej Ziółkowski]

Hey,
I am using column mixin with cycle variable in connection with angular js ng-repeat directive. I want to make a projects gallery with 3 gallery elements in row.

HTML file:

<div class='projectGalleryElement' ng-repeat='project in projectsList | filter: projectTypeFilter'> <a href='#projectTemplate/{{project.id}}'> <div class='pictureMockup'></div> <div> {{project.name}} <br> {{project.location}} </div> </a> </div>

SCSS file:

.projectGalleryElement { @include column(1/3, $cycle: 3); margin-bottom: 20px; .pictureMockup { background-color: green; height: 182px; width: 100%; margin-bottom: 6px; } a { text-decoration: none; line-height: 26px; } }

In the first row of the gallery, the first element is displayed correctly, but the second element is offseted by 1/3, even though I do not use $offset variable. In each next row gallery elements are placed correctly.

[Philippe Vignau]

Hey,
I had the same behaviour, but fixed it.
My HTML looked like that :

<section>
  <h1>Projects</h1>
  <div class="project">
    <h2>Project 1</h2>
  </div>
  <div class="project">
    <h2>Project 2</h2>
  </div>
  <div class="project">
    <h2>Project 3</h2>
  </div>
  <div class="project">
    <h2>Project 4</h2>
  </div>
</section>

However, @include column() eventually uses nth-child, like below :

div.project:nth-child(n) {
  margin-right: 3%;
  float: left;
  clear: none;
}

div.project:nth-child(3n) {
  margin-right: 0%;
  float: right;
}

div.project:nth-child(3n + 1) {
  clear: both;
}

In my case, the first div.project was actually the 2nd child of the container.
I'm pretty sure your "Project 1" is also 2nd child of its container.
Maybe the first child is your top bar.

I did something like that :

<section>
  <h1>Projects</h1>
  <ul class="projects">
    <li><h2>Project 1</h2></li>
    <li><h2>Project 2</h2></li>
    <li><h2>Project 3</h2></li>
    <li><h2>Project 4</h2></li>
  </ul>
</section>

Also more semantically correct.

[Maciej Ziółkowski]

Hey,
Thanks for the suggestion. My gallery looks ok right now with HTML code written as follows:

<ul> <li class='projectGalleryElement' ng-repeat='project in projectsList | filter: projectTypeFilter'> <a href='#projectTemplate/{{project.id}}'> <div class='pictureMockup'> <img src="" alt=""> </div> <div> {{project.name}}<br> {{project.location}} </div> </a> </li> </ul>

SCSS class definition is the same as before.

[Cory Simmons]

Thanks for the help @Philoozushi 👍