grid-crazy

grid-crazy.markdown

grid-crazy

A Pen by Sebastian Rothbucher on CodePen.

License.

index.html

<div style="margin-bottom: 10px;">
  <label>Left divs: <input type="range" min="1" max="10" value="5" oninput="adjustDivs('left', this.value)" /></label>  - 
  <label>Right divs: <input type="range" min="1" max="10" value="5" oninput="adjustDivs('right', this.value)" /></label>
</div>
<div class="all">
  <div class="left">
    <div class="item">one</div>
    <div class="item">two</div>
    <div class="item">three</div>
    <div class="item">four</div>
    <div class="item">five</div>
  </div>
  <div class="right">
    <div class="item">one</div>
    <div class="item">two</div>
    <div class="item">three</div>
    <div class="item">four</div>
    <div class="item">five</div>
  </div>
</div>

rqrygp.markdown

rqRygP

A Pen by Sebastian Rothbucher on CodePen.

License.

script.js

var names = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
function adjustDivs(where, newCount) {
  var divs = document.getElementsByClassName(where)[0].getElementsByTagName('div');
  if (divs.length > newCount) {
    divs[divs.length - 1].parentNode.removeChild(divs[divs.length - 1]);
    adjustDivs(where, newCount); // poss. several times
  } else if (divs.length < newCount) {
    var newDiv = document.createElement('div');
    newDiv.appendChild(document.createTextNode(names[divs.length]));
    newDiv.classList.add('item');
    document.getElementsByClassName(where)[0].appendChild(newDiv);
    adjustDivs(where, newCount);
  }
}

style.less

.all {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.left, .right {
    display: contents;
}

.left .item {
    background: pink;
}
.left-loop (@nth) when (@nth <= 10) { // from front
    .left-loop-inner (@nth, @siblings) when (@siblings <= 10) { // how many siblings
        @nthlast: (@siblings - @nth + 1); // 2 out of 5 siblins means 4th from behind
        .left .item:nth-child(@{nth}):nth-last-child(@{nthlast}) { // nth out of siblings
            grid-row: mod(@nth - 1, ceil(@siblings / 2)) + 1; // for 5: 1, 2, 3 in 1, 2, 3 and 4, 5 in 1, 2
            grid-column: floor((@nth - 1) / ceil(@siblings / 2)) + 1; // for 5: 1, 2, 3 in 1 and 4, 5 in 2
        }
        .left-loop-inner(@nth, @siblings + 1);
    }
    .left-loop-inner(@nth, 1);
    .left-loop(@nth + 1);
}
.left-loop(1);

.right .item {
    background: turquoise;
}
.right-loop (@nth) when (@nth <= 10) { // from front
    .right-loop-inner (@nth, @siblings) when (@siblings <= 10) { // how many siblings
        @nthlast: (@siblings - @nth + 1); // 2 out of 5 siblins means 4th from behind
        .right .item:nth-child(@{nth}):nth-last-child(@{nthlast}) { // nth out of siblings
            @isFirst: abs(round(@nth / @siblings) - ceil(@nth / @siblings)); // for the first half, round is different
            @isOdd: mod(@siblings, 2);
            @isEven: abs(@isOdd - 1);
            grid-row: mod((@nth - @isEven), ceil(@siblings / 2)) - (@isFirst * @isOdd) + 1; // for 5: 1, 2 in 1, 2 and 3, 4, 5 in 1, 2, 3
            grid-column: floor((@nth - @isEven) / ceil(@siblings / 2)) + 1 + 2; // for 5: 1, 2 in 1 and 3, 4, 5 in 2
        }
        .right-loop-inner(@nth, @siblings + 1);
    }
    .right-loop-inner(@nth, 1);
    .right-loop(@nth + 1);
}
.right-loop(1);