Forums

Create custom asymmetrical pageList grid

Permalink
Layout for example (or see the attachment)
[1][ 2 ] [1]
[1][ 2 ] [1]

Someone have idea how to create "forEach" loop + some code that do this task in elegant way? "each X loops do this task". This is also useful for galleries.

Example of pagelist output with 6 pages items:
//Html
div class= One
div class= One
div class= Two
div class= One
div class= One
div class= Two
//css
.One {width: 25%}; 
.Two { width:50%} ;

1 Attachment

siton
 
shotrox replied on at Permalink Reply
shotrox
this can be solved with nth-child CSS pseudo selectors. are you familiar with nth-child selector?
shotrox replied on at Permalink Reply
shotrox
so if all of these are divs in a specific "wrapper" you could say

#wrapper div:nth-child(3n+0) {
// whatever the CSS for each 3rd element
}

that will work
siton replied on at Permalink Reply
siton
Thanks. I will try this. I know this selector - but i think in the start about PHP solution (some counter mabye). I think you right.

The problem with 3n its always repeat (in the example the "next" loop is with flip layout)
hutman replied on at Permalink Best Answer Reply
hutman
If you wanted to do this with PHP you could do that too, something like this:

<?php
$itemCount = 0;
foreach($pages as $page){
    $itemCount++;
    ?>
    <div class="<?php if($itemCount % 3 == 0){ echo 'two'; } else { echo 'one'; } ?>">