In my years as a developer, I have found myself building grids in html, always with a different number of elements per row. The first few times I solved this problem, I used the modulus (%) divided by the number of elements needed for the row, with an if statement to see if the row container should be closed or not. Â This especially sucks if you are doing something recursively, so why not do it in a way that is easy to read, doesn’t require css hacks, and can take advantage of the row-fluid and span classes in bootstrap. Use array_chunk.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //row markup | |
| $row = '<div class="row-fluid">%s</div>' | |
| //$posts = whatever you are trying to put in a grid. | |
| $span_divs = array(); | |
| foreach ( $posts as $post ) { | |
| //make a span box | |
| $span_divs[] = sprintf( "<div class="span4">%s</div>" , $post); | |
| } | |
| //chunk the array of grid items into a number if items | |
| foreach ( array_chunk($span_divs, 3) as $spans ) { | |
| //pull the chunked array markup into the row markup and write it out | |
| echo sprintf($row, implode('', $spans)); | |
| } |
Isn’t that much easier to read?