Grid CSS Responsivo

[willwalker 2]

Alguém de boa alma poderia me explicar e me dar um exemplo prático de como fazer um layout responsivo? Não estou conseguindo entender os docs que acho na internet. Preciso dessa ajuda urgentemente! =/

[rikaschmitt 54]

Oi.

Eu também não entendia direito.. mas agora consigo ter uma noção razoável de como utiliza-las e estou conseguindo criar o que quero (apesar de algumas dificuldades, rsrs).

 

Bom.. vou tentar explicar do jeito que eu entendi. Corrijam-me se eu estiver errado.

 

 

Geralmente o grid é dividido em até 12 partes, somando uma largura máxima x.

Digamos que você está usando algum grid pronto (bootstrap por exemplo).

"Visualmente" o grid é assim:

 

Cada nome alí é uma classe feita no css do grid. E também dá pra notar o que cada uma representa.

 

Digamos que no seu site tem uma área com 4 colunas de conteúdos, lado a lado.

Baseando-se na imagem acima, podemos fazer assim:

<div class="container">
  <div class="grid-3">
   CONTEUDO UM
  </div>
  <div class="grid-3">
   CONTEUDO DOIS
  </div>
  <div class="grid-3">
   CONTEUDO TRES
  </div>
  <div class="grid-3">
   CONTEUDO QUATRO
  </div>
</div>

Pronto.

Como é responsivo, se você redimensionar a janela, automaticamente as divs irão se ajustar e tudo mais.

[willwalker 2]

Eu tinha entendi assim mesmo, mas não achei que fosse assim tão simples o tal GRID que todos os Front End usam. Daí fiquei na dúvida se era algo assim tão simples. Obrigado por esclarecer ;)

[rikaschmitt 54]

Agora fiquei preocupado.

Será que realmente é assim? HAHAHA

 

Bem, eu espero que seja assim mesmo.

Também pensava que fosse algo mais complicado, mas não xD