CODEWITHSUNDEEP
jquerycssgrid
SilentBobSC
SilentBobSC

Reputation: 435

Fluid CSS Grid structure possible?

Short and simple version: I have a project where I need to define a DIV that will repeat horizontally and then wrap to the next row when out of space (tabular-like grid). I've seen mention of jQuery.GridLayout, but the demo/homepage is 404'd so I have no clue if this is what I'm looking for. Simply, I'm trying to achieve this:

Div.ItemClass   Div.ItemClass   Div.ItemClass   Div.ItemClass
Div.ItemClass   Div.ItemClass   Div.ItemClass   Div.ItemClass
...

The trick is that I'm forced to use the same class (I do have access to an Alternate Item template that will insert different code for each alternate item) but I need them to 'stack' horizontally until they run out of horizontal space and then 'wrap' to the next row.

Quick background - the project is inside a CMS system, and the item listing module gives me the following template files to work with inside the "list" view:

-Header
-Item
-Alternate Item
-Footer

Thoughts, ideas?

Edit: ok, so I'm a bit of an idiot and forgot rule #1 - Check your (rendered) source. The most significant problem is that the CMS Module that is being used is 'wrapping' each template object (Header, Item, alternate, footer) inside a TD element, making a true 'wrapping div' nigh impossible. I'm glad I wasn't just going nuts because I was fairly certain nested DIVs were the right approach.

Edit #2: Ok, now I'm thinking that I can maybe pull this off with a bit of jQuery manipulation. I would need to target the Div.ItemClass and then place them inside the positioned wrapper div, possibly overlaying / replacing the exising tabular layout code (maybe used in the Header template?). As of this edit the current code that is forced when rendered is:

<td><!--This is Header.html --><div class="Container" /></td>
<td><!--This is Item.html --><div class="ItemName">Item 1</div></td>
<td><!--This is Alternate.html --><div class="ItemName">Item 2</div></td>
<td><!--This is Item.html --><div class="ItemName">Item 3</div></td>
<td><!--This is Footer.html -->[PAGER]</td>

I hope this makes sense, as I've stated earlier, alot of the tables are forced by the CMS and module system I'm having to use for this project.

Edit #3 - Managed to make it work! Added a bit of jQuery:

$(function() {
    $('div.ItemClass').appendTo('#ContainerID');
});

Simply, it grabs the Divs out of the TD elements and places them in the ContainerID I placed in the Header.html section!

Upvotes: 1

Views: 774

Answers (1)

bisko
bisko

Reputation: 4078

If you have fixed widths it's easy. Just put float lefts on them and arrange the width accordingly so that only X items will be on a row. Something like

<div class="container">
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div style="clear: both;"></div> <!-- just to fix the height, remove to see effect. -->
</div>

and style

.container {
   width: 500px;
}
.item {
   width: 100px; // for 5 items (without margins)
   float: left;
}

Upvotes: 5

Related Questions