Построение турнирной сетки

Необходимо реализовать турнирную сетку. Делаю я её на основе бинарного дерева. Всё было отлично до того момента, пока я не начал его выводить. Дерево обхожу рекурсивно

Код (Text):

1.  
2.     function showbracket($node,$ur){
3.         echo '<div class="row"><div class="col-md-offset-'.$ur.' col-md-1"><div class="alert alert-success">'.$node[0]['tid1'].' VS '.$node[0]['tid2'].'</div></div></div>';
4.         if($node[0]['left']!='' and $node[0]['right']!=''){
5.             showbracket(findnode($node[0]['left']),$ur-1);
6.             showbracket(findnode($node[0]['right']),$ur-1);
7.         }
8.     }

в общем выводит так


в первой колонке четвертьфиналы, во второй полу, и в третьей финал.
По колонкам всё верно, но не верно по высоте каждого матча. Всё логично, ведь они отрисовываются так, как их обходит рекурсия. Вот и надо как-то придумать чтобы это выглядело как сетка.

 

Код (Text):

1. <div class="row">

вот всё моё смещение, эта вся штука свёрстана на бутстрапе.
в нём есть грид-система, которая имеет 12 колонок. А вот строчек сколько хочешь. И как мне задать что эта строка должна быть после вот той, до которой ещё не дошла рекурсия?

 

можно написать, но я как-то вяло представляю его структуру

 

Кароч надо как-то пределять ещё и вертикальное смещение, но я вот что-то никак немогу придумать как это организовать.

 

Хотя бы шаблончик, а то совсем под вечер туплю

Код (Text):

1. showbracket(findnode($node[0]['right']),$ur-1);

в эту функцию нужно ещё передать смещение по игрику, если по вашем, то получится фигня.
что-то вроде

Код (Text):

1. showbracket(findnode($node[0]['right']),$ur-1,100px * $ur);

дерево то и вниз идёт, на нижнюю ветку другое смещение

 

Беда-беда. Плакала моя адаптивность.

 

Если хочешь сделать что-то хорошо - сделай это сам.

Код (Text):

1.     function showbracket($node,$ur){
2.         if($node[0]['left']!=''){
3.             showbracket(findnode($node[0]['left']),$ur-1);
4.         }
5.         echo '<div class="row"><div class="col-md-offset-'.$ur.' col-md-1"><div class="alert alert-success">'.$node[0]['tid1'].' VS '.$node[0]['tid2'].'</div></div></div>';
6.         if($node[0]['right']!=''){
7.             showbracket(findnode($node[0]['right']),$ur-1);
8.         }
9.  
10.     }

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

тему можно закрывать.