Возможна ли структура Fluid CSS Grid?

Question

Короткая и простая версия: у меня есть проект, в котором мне нужно определить DIV, который будет повторяться по горизонтали, а затем переходить к следующему ряду, когда не будет места (табличная сетка). Я видел упоминание о jQuery.GridLayout, но демо / домашняя страница имеет 404, так что я понятия не имею, если это то, что я ищу. Просто я пытаюсь добиться этого:

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

Хитрость в том, что я вынужден использовать один и тот же класс (у меня есть доступ к шаблону альтернативного элемента, который будет вставлять различный код для каждого альтернативного элемента), но мне нужно, чтобы они складывались горизонтально до тех пор, пока они не закончатся. горизонтальное пространство, а затем «перенос» на следующий ряд.

Быстрый фон - проект находится в системе CMS, и модуль списка элементов дает мне следующие файлы шаблонов для работы внутри представления "список":

-Header
-Item
-Alternate Item
-Footer

Мысли, идеи?

Редактировать: хорошо, так что я немного идиот и забыл правило № 1 - Проверьте ваш (отрендеренный) источник. Наиболее существенная проблема заключается в том, что используемый модуль CMS «оборачивает» каждый объект шаблона (верхний колонтитул, элемент, альтернатива, нижний колонтитул) внутри элемента TD, делая истинное «оборачивание div» почти невозможным. Я рад, что не просто сошел с ума, потому что был уверен, что вложенные DIV были правильным подходом.

Редактировать # 2: Хорошо, теперь я думаю, что, возможно, смогу осуществить это с помощью небольшой манипуляции с jQuery. Мне нужно нацелиться на Div.ItemClass, а затем поместить их в позиционированную оболочку div, возможно, накладывая / заменяя существующий код табличного макета (может быть, используется в шаблоне заголовка?). Начиная с этого редактирования, текущий код, который принудительно вызывается при рендеринге:

<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>

Надеюсь, в этом есть смысл, как я уже говорил ранее, многие таблицы создаются CMS и модульной системой, которую я должен использовать для этого проекта.

Edit # 3 - удалось заставить его работать! Добавил немного jQuery:

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

Просто он извлекает элементы Div из элементов TD и помещает их в ContainerID, который я поместил в раздел Header.html!

Answer 1

Если у вас фиксированная ширина, это легко. Просто положите на них поплавки и расположите их по ширине так, чтобы в ряду были только X предметов. Что-то вроде

<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>

и стиль

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