BuddyPress.org

This is a CSS issue. I have not tried this out, but you can use this as a basic idea. There are different ways to do this. This is just a quick stab at a possible solution for you, to get you down the road. You’ll need to adjust based on your desired cell size and how and where you’re placing this grid in your theme.

If you are not using FIrefox with FIrebug Add-on, you will want to do so. It will make it a lot easier to tweak your CSS.

In your site-wide.css:

div.cells {

width: 50px;

float:left;

padding: 2px;

}

In your theme:

<div class="cells">1st user avatar</div>

<div class="cells">2nd user avatar</div>

<div class="cells">3rd user avatar</div>



<div class="clear"></div>



<div class="cells">4th user avatar</div>

<div class="cells">5th user avatar</div>

<div class="cells">6th user avatar</div>



<div class="clear"></div>



<div class="cells">7th user avatar</div>

<div class="cells">8th user avatar</div>

<div class="cells">9th user avatar!</div>

You’ll need to mess around with the padding and figure out how you want to position each avatar within its cell.

Also, instead of hard coding the grid dimensions within your theme, you could use a looping structure, allowing you more flexibility in setting the grid dimensions. For example, you could easily change the grid from a 3×3 dimension to a 4×8. The next day, switch it to 6×6. You could change the size automatically based on certain parameters.