CODEWITHSUNDEEP
javascriptjquerycsslayout
2ne
2ne

Reputation: 5976

CSS3 Snakes & Ladders / Zig Zag Layout

I am trying to create a fluid layout in which the wrapped content alternates from a left-to-right flow to a right-to-left flow. See example below:

1   2   3   4   5
10  9   8   7   6
11  12  13  14  15
20  19  18  17  16

Markup and styles http://codepen.io/2ne/pen/IiGCx

I have tried flex box and multi column layouts none of which have worked for me. I am hoping someone can help me with ideally a pure css solution which does not alter the html as the html is dynamic. If not an efficient javascript/jquery solution.

The reason that I am finding this hard is that there is no fixed width so I dont know when the browser is wrapping the content.

li {
  width: 160px;
  float: left;
}

Many thanks for any help you can offer.

<ul class="clearfix">
  <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>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

Upvotes: 2

Views: 1257

Answers (2)

Brady
Brady

Reputation: 41

Here is a naive approach to solving the problem using Sass, CSS Flexbox, and the 'order' property.

See the Pen naive snakey flexbox by Brady Hullopeter (@bradyhullopeter) on CodePen.

// See transpiled SCSS in CodePen

$order: 
  1 2 3 4 5 6 7 8 9 10 20 
  19 18 17 16 15 14 13 12 11 
  21 22 23 24 25 26 27 28 29 30 
  40 39 38 37 36 35 34 33 32 31 
  41 42 43 44 45 46 47 48 49 50 
  60 59 58 57 56 55 54 53 52 51 
  61 62 63 63 65 66 67 68 69 70 
  80 79 78 77 76 75 74 73 72 71 
  81 82 83 84 85 86 87 88 89 90 
  100 99 98 97 96 95 94 93 92 91;
  
li {
  @for $i from 1 through 100 {
    &:nth-child(#{$i}) {
      // order in a snake-like way illustrated by the change in background color
      order: nth($order, $i);
    }
  }
}

Upvotes: 0

472084
472084

Reputation: 17885

This does alter your HTML, but only adds classes. If you really cant alter anything, you can just add these classes using JS/jQuery which shouldn't be too hard.

<style>
.r{
  float:right;
  width:20%;
}
.l{
  float:left;
  width:20%;
}
</style>

<ul class="clearfix">
  <li class="l">1</li>
  <li class="l">2</li>
  <li class="l">3</li>
  <li class="l">4</li>
  <li class="l">5</li>
  <li class="r">6</li>
  <li class="r">7</li>
  <li class="r">8</li>
  <li class="r">9</li>
  <li class="r">10</li>
  <li class="l">11</li>
  <li class="l">12</li>
  <li class="l">13</li>
  <li class="l">14</li>
  <li class="l">15</li>
  <li class="r">16</li>
  <li class="r">17</li>
  <li class="r">18</li>
  <li class="r">19</li>
  <li class="r">20</li>
</ul>

Upvotes: 1

Related Questions