Как создать динамическую сетку CSS без пустых пространств? [дублировать] ⇐ Html

[Anonymous]

Я хочу создать отзывчивую, 3 динамическую сетку CSS, которая является гибкой и приспосабливается к контенту, но я не хочу никаких пустых пространств между рядами, когда элементы имеют разные высоты.

Код: Выделить всё

.container {
width: 800px;
height: 600px;
}

.container > ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}

.container > ul > li {
display: block;
box-sizing: border-box;
float: left;
width: 33.33%;
}

.container > ul > li:nth-child(3n+1) {
clear: left;
}

html -код:

Код: Выделить всё

[list]

[*]
Element 1

Element 1 Item 1
[*]Element 1 Item 2
[*]Element 1 Item 3
[/list]


[*]
Element 2
[list]
Element 2 Item 1
[*]Element 2 Item 2
[*]Element 2 Item 3
[*]Element 2 Item 4
[*]Element 2 Item 5
[*]Element 2 Item 6
[*]Element 2 Item 7
[*]Element 2 Item 8
[/list]


[*]
Element 3
[list]
Element 3 Item 1
[*]Element 3 Item 2
[*]Element 3 Item 3
[/list]


[*]
Element 4
[list]
Element 4 Item 1
[*]Element 4 Item 2
[*]Element 4 Item 3
[*]Element 4 Item 4
[/list]


[*]
Element 5
[list]
Element 5 Item 1
[*]Element 5 Item 2
[*]Element 5 Item 3
[/list]


[*]
Element 6
[list]
Element 6 Item 1
[/list]


[*]
Element 7
[list]
Element 7 Item 1
[*]Element 7 Item 2
[*]Element 7 Item 3
[/list]

Это результат, который я имею сейчас:

и это то, что я хочу:
/>
Если я удаляю please от каждого 3n+1 , он выглядит немного лучше, но все еще есть какое -то пустое.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... pty-spaces