Grid view in jQuery Mobile

I'm trying to show a list with shopping cart items in a row with 4 grids:

1. is for deleting each item with a checkbox
2. is for showing the product, its image and attributes
3. is for updating the quantity
4. is for showing the price of the product.

The grids have a different height for each row (cart item). I can set an individual height for each grid, but that means that if a product in the cart has too much text, it won't auto height.

Then when I would set auto height for each product, all the other 3 grids on the row won't increase equally. It's just going to be a messy page.

Is there a solution so that when I set one of the 4 grids to auto heig开发者_如何学Goht, the other 3 will join?

I just find a fix for my problem

<script type="text/javascript" >
$(document).ready(function() {
setHeight('.col');
});

//Initialize the global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(column) {
//Get all the element with class = col
column = $(column);

//Loop all the column
column.each(function() {       

    //Store the highest value
    if($(this).height() > maxHeight) {
        maxHeight = $(this).height();;
    }
});

//Set the height
column.height(maxHeight);
}
</script>

Then i used the current class to each of my grids like this: (notice it is in the second div)

    <div class="ui-block-a"><div class="ui-bar ui-bar-c col"><?php echo tep_draw_checkbox_field('cart_delete[]', $products[$i]['id']); ?></div></div>