score:2

Accepted answer

Twitter's Bootstrap Grid System has many classes that fit your requirements like 'col-lg-** col-md-** col-sm-** col-xs-**'. Take a look at this:

http://getbootstrap.com/css/#grid

To ensure that elements stack into identical rows and columns, assign a class with a fixed height to all elements:

http://jsbin.com/xipijo/edit?html,css,js

Also, consider using a template to render your GitHub repositories to html:

http://handlebarsjs.com/

score:1

Just put the elements in col-md-4. The boostrap grid, has 12 rows, so by giving each element a width of 4/12, you end up with 3 elements per row.

JS bin: http://jsbin.com/macifezapi/1/edit?html,js,output

Depending on which width you want to the rows to break into a mobile layout (each column taking 100% width) you can use col-lg-4, col-md-4, col-sm-4 or col-xs-4. For more information see Boostrap grid system. There is no need for manually calculation 3 rows, and putting an row wrapper around them!

Update:

Becuase the columns have different heights, the grid system causes the different columsn to have different anounts of items. This doesn't look good at all.Easiest solution is to add a default height to each item, that way the grid system workds correct again.

Another solution, if only modern borwser have to be supported, is to use the new flexbox technique.

Here is an example: http://jsbin.com/muzepubupu/edit?html,css,js,output

A good description how flexbox works can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Related Query

More Query from same tag