Galeria de produtos com descrição em Css

[OldSchool 0]

Olá a todos. Estou aprendendo Css (Cursando Tec. em Informatica) e estou tentando criar uma galeria de produtos para um projeto de e-commerce (O projeto engloba apenas html e css sem banco de dados), Quero criar uma galeria de imagens com descrição e preço. Mas não tenho ideia de como fazer, Poderiam me ajudar? Estou pensando no seguinte estilo de página. http://www.kabum.com.br/

Apenas o estilo de galeria, 3 Colunas com descrição e preço, Sem formas de pagamento etc. algo bem simples. Se for possivel faze-lo em css espero a ajuda de vocês, Obrigado a atenção. Até.

[Marlon Pacheco 132]

Tem alguma coisa pronta já para o pessoal poder dar as dicas?

[OldSchool 0]

Fiz algumas coisas.Mas quando postei não tinha nada feito

 

Html:

div id="produtos">
                            <div class="produto" id="galaxy">
                                <img src="_img/amd.jpg"/>
                                <h1>Processador AMD FX-6300 3.5Ghz AM3+ FD6300WMHKBOX</h1>
                                <p>A nova geração de processadores da AMD Bulldozer já chegou! Baseados na arq..</p>
                                <h2>R$350,00</h2>
                            </div>
                            <div class="produto" id="galaxy">
                                <img src="_img/amd.jpg"/>
                                <h1>Processador AMD FX-6300 3.5Ghz AM3+ FD6300WMHKBOX</h1>
                                <p>A nova geração de processadores da AMD Bulldozer já chegou! Baseados na arq..</p>
                                <h2>R$350,00</h2>
                            </div>
                            <div class="produto" id="galaxy">
                                <img src="_img/amd.jpg"/>
                            <h1>Processador AMD FX-6300 3.5Ghz AM3+ FD6300WMHKBOX</h1>
                            <p>A nova geração de processadores da AMD Bulldozer já chegou! Baseados na arq..</p>
                            <h2>R$350,00</h2>
                            </div>
                            <div class="produto" id="galaxy">
                                <img src="_img/amd.jpg"/>
                            <h1>Processador AMD FX-6300 3.5Ghz AM3+ FD6300WMHKBOX</h1>
                            <p>A nova geração de processadores da AMD Bulldozer já chegou! Baseados na arq..</p>
                            <h2>R$350,00</h2>
                            </div>
                            <div class="produto" id="galaxy">
                                <img src="_img/amd.jpg"/>
                                <h1>Processador AMD FX-6300 3.5Ghz AM3+ FD6300WMHKBOX</h1>
                                <p>A nova geração de processadores da AMD Bulldozer já chegou! Baseados na arq..</p>
                                <h2>R$350,00</h2>
                            </div>
                            <div class="produto" id="galaxy">
                                <img src="_img/amd.jpg"/>
                                <h1>Processador AMD FX-6300 3.5Ghz AM3+ FD6300WMHKBOX</h1>
                                <p>A nova geração de processadores da AMD Bulldozer já chegou! Baseados na arq..</p>
                                <h2>R$350,00</h2>
                            </div>
                            </div>

Css

#produtos{
    float: left;
    left: 50%;
    border-radius: 8px;
    width: 70%;
}
.produto{
    width: 31%;
    height: 450px;
    margin-top: 25px;
    border: 1px solid #ddd;
    border-radius: 10px;
    float: left;
    margin-left: 10px;
}
.produto img{
    width: 90%;
    margin: 12px;
}
.produto h1{
    font-size: 17px;
    margin: 8px;

}
.produto p{
    margin: 8px;
}
.produto h2{
    margin: 10px;
    font-size: 17px;
}

Esta como queria, Apenas se tiverem alguma dica para melhora-lo!

Desculpe-me pelo HTML bagunçado.