CSS Nth Child calculate top height based on N

Question

I am trying to use CSS to calculate the top height to add every 5+1 elements.

The following code moves a series of absolute positioned elements to their respective places.

    .screen [data-app]:nth-child(5n-4) { left:0%; }
    .screen [data-app]:nth-child(5n-3) { left:20%; }
    .screen [data-app]:nth-child(5n-2) { left:40%; }
    .screen [data-app]:nth-child(5n-1) { left:60%; }
    .screen [data-app]:nth-child(5n) { left:80%; }

This creates the illusion of five columns with absolutely positioned elements. Now what I'd like to do is for the next row of five to also have top:180px added to them, and the row after that top:360px etc.. etc..

Can this be done without the need to write CSS code for the position of every single element. Some way of applying a top attribute for each group of five based on n value of the current element.

Answer 1

You can either use SASS or Flexbox in order to achieve the result you're looking for. In this case SASS will create a more bloated CSS-file than ideal, but will use the rules you posit, while Flexbox will be more future-proof and easily maintained.

The HTML

<div class="screen">
    <div data-app>asdf1</div>
    <div data-app>asdf2</div>
    <div data-app>asdf3</div>
    <div data-app>asdf4</div>
    <div data-app>asdf5</div>
    <div data-app>asdf6</div>
    <div data-app>asdf7</div>
    <div data-app>asdf8</div>
    <div data-app>asdf9</div>
    <div data-app>asdf10</div>
    <div data-app>asdf11</div>
</div>

SASS

.screen {
    position: relative;
}
.screen [data-app] {
    $height: 180px;
    $offset: 20%;
    $blocks_per_row: 5;

    position: absolute;
    width: 20%;

    @for $i from 0 through 20 {
        $y: floor($i / $blocks_per_row);
        $x: $i % 5;

        &:nth-child(#{$y}n+#{$i}) {
            left: $x * $offset;
            top: $y * $height;
        }
    }
}

Flexbox

.screen {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.screen [data-app] {
    flex: 0 1 20%;
    height: 180px;
}

As you can see, there's no upper limit in the Flexbox solution and it's very clean. I hope any of these solutions help you.