montar uma rede estilo piramide

[Jordan Pinheiro_147113 15]

olá estou montando um rank estilo piramide

 

mas sou programador e preciso eu mesmo montar meu css... eu pesei em fazer um ul e li mas na hora nesas ai fiz uma aberração

 

vejam o css (sem piadas rsrs)

 

 

.rede {
                width: 100%;
                margin: 0 auto;
                height: 700px;
                border: #999 1px solid;
                float: left;
            }
            .eu {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                margin: 0 auto;
            }
            .eu2 {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                float: left;
                margin-left: 100px;
            }
            .eu3 {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                float: right;
                margin-right: 80px;
            }
            .rede1 {
                width: 100%;
                height: 80px;
                border: #0a0 1px solid;
                float: left;
            }
            .rede2 {
                width: 600px;
                height: 80px;
                border: #0a0 1px solid;
                float: left;
                margin-left: 310px;
            }
            .rede3 {
                width: 800px;
                height: 80px;
                border: #0a0 1px solid;
                float: left;
                margin-left: 100px;
            }
            .eu3 {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                float: left;
                margin-left: 80px;
            }
            .eu4 {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                float: left;
                margin-left: 80px;
            }
            .eu5 {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                float: left;
                margin-left: 80px;
            }
            .eu6 {
                background-color: #0a0;
                width: 80px;
                height: 80px;
                border: #999 1px solid;
                float: left;
                margin-left: 100px;
            }

html

 

 

<div class="row">
    
    <div class="rede">
        
        <div class="rede1">
            <div class="eu">a</div>
        </div>
        
        <div class="rede2">
            <div class="eu2">a</div>
            <div class="eu3">b</div>
        </div>
        
         <div class="rede3">
            <div class="eu3">a</div>
            <div class="eu4">b</div>
            <div class="eu5">a</div>
            <div class="eu6">b</div>
        </div>
        
    </div>
    
</div>

resultado ( lógico não é o que quero)

 

 

preciso de algo estilo

 

[mangakah 217]

Acho melhor você usar um grid para isso, como o SimpleGrid, p.ex.

[Ronildo Souza 1]

Usei isso

http://thecodeplayer.com/walkthrough/css3-family-tree

[Jordan Pinheiro_147113 15]

muito obrigado pela ajuda