Eliminating the spacing between each ARTISTS image / details when adding more info like biography

Ok, let’s look at the artist page on any skin, they are all going horizontally across with either 3 or 4 rows of an ARTISTS image on the page with their profile name underneath.
That the basic setup. I’m looking to add a few more info (ex: place of location, ratings, views or biography, etc.) underneath each artists image besides the Artists profile name
But when you add a few more things underneath that artist image there a tremendous space between each image due to everything staying uniform with each other in that horizontal row.
If I have the biography there…each artists has more than others so there that space.

How can I get it to where that artists image and info just sets underneath each other to eliminate the spacing.

Below is the info from artists_row.tpl of the jrNova Skin


updated by @boplive: 09/28/14 05:41:01AM

you have a .row class. inside that is supposed to be .col divs. If you want it going across the whole row, then add a div .col12

if you want it going across half the page then .col6

Hi Michael..thanks for the help...I already have the col6 divs to make it go half way across the page which is set in another template that I called artist_default_row.tpl it's pulling some data that has biography, description, rating..etc.
I'm looking more into getting rid of that extra space in between each profile.
More like how pinterest has there items...which are all directly underneath each other no matter how much details /info you add to the items...no tremendous gap between each item.
I'll put a link of blogs here when i get home so you can see an example of the spacing

Thanks
Ed
updated by @boplive: 08/19/14 02:56:49PM

I think what you are describing is a grid, where the heights of each box are not equal which is causing you a layout problem? If you posted a link with your question it would be much easier for you to describe, and easier for everyone else.

3 possible solutions:

Pinterest will be using something like Masonry to create it's grid - a javascript plugin to lay things out with no gaps. There are others but this is the best one I know of: http://masonry.desandro.com/

If you need to keep things in rows you could also look at some jquery to give you equal height boxes within each row (the empty space is within the box rather than below it). Again, there are many, I use this one: https://github.com/filamentgroup/jQuery-Equal-Heights

You could also use css to fill vertically by columns rather than rows. But I haven't tried that, and you should check browser support for it. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 08/19/14 03:22:54PM

but you're wrapping the whole thing in a .row .

so if you only have 1 row and it has more than 12 cols, then there's the issue.

A row has 12 cols. no more, no less.

if you have
.row
.col6
.col6
.col6
.row

then you have 6+6+6 = 18. 18 is not 12.

so make sure you have:
.row
.col6
.col6
.row
.col6
.col6
.row
.col6
.col6
.row
.col6
.col6


In your code above, it will only be good, if your {jrCore_list} is limited to 2 if each of the things inside is .col6

--edit--
Its also ok to have a row inside another row. but it still must have 12 cols.

Like this:
so that is a col of 8|4 then inside the col of 8 there is 4|4|4

Thats fine.

--edit edit--
or even a couple of rows stacked inside the 8 col.
thats ok too.
updated by @michael: 08/19/14 07:13:42PM

got it Michael..

and I took a look at what Steve provided...something like how the Masonry grid interacts is what Im looking for.
I'm going to check out the github link you added and see what that offers

Masonry is really cool, and versatile - go for that one.

Equal heights will make all of the boxes in a container (div, row or page) the same height regardless of the varying height of their contents - they will all be the same height as the tallest box.

I'm not sure how it will act with Jamroom's grid, but with something like bootstrap it means you can put any number of items into a div.row and you will have a regular grid where all items are the same height, so each row within the div.row (counterintuitive but I'm sure you can make sense of it) lines up. It's not much more difficult to make items in a "sub row" (i.e. at different vertical positions within the same container) of equal height - feel free to ask if you run into that problem/need, but I don't think that is an option with the Jamroom css grid anyway.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 08/21/14 02:58:02PM