Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rikaschmitt

Como usar elementos dentro de um grid responsivo?

Por , em Desenvolvimento frontend

Recommended Posts

rikaschmitt    54

rikaschmitt
Postado

Boa tarde galera.

 

Estou utilizando um grid feito pelo nosso amigo William Bruno, que é ótimo por sinal. O problema é que não sei direito como dispor o conteúdo dentro do grid.

 

A principio, estou usando as divs correspondentes ao grid e dentro delas, utilizo meus códigos para gerar o conteúdo. Em alguns casos, os textos por exemplo, acabam não acompanhando o responsivo do site e ficando um tanto quanto desconfigurado.

 

Alguma dica de como usar os elementos dentro do grid?

 

Seria interessante usar grid dentro do próprio grid? Digo, ter a div pai "coluna-media-1" e dentro dela dividir o conteúdo e divs tipo "coluna-pe-1" e "coluna-media-3"?

 

Algo que aconteceu no meu site foi isso:

20rmcya.jpg

(desfoquei os telefones)

 

O telefone quebra a linha, e não centraliza.. fica tudo feio.

Mesmo arrumando com @media query, para diminuir o tamanho das fontes usadas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Hum.. eu não sei se entendi o que vc está fazendo...

 

Vc pode utilizar @media query para centralizar o conteúdo em certa resolução.

O que vc quer dizer com "grid dentro do grid"?

 

Vc pode utilizar suas próprias classes em conjunto ou dentro dos elementos do grid, apenas atente a deixar todo o trabalho de definir largura, espaçamento e "floats" para o grid em si, ou seja, no teu css, vc não vai ter as propriedades width, padding, margin ou float (praticamente).

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Sim.

Estou usando isso e fazendo @media aonde precisa.

O problema é que tem muita coisa.. muito elemento.. e acaba ficando cheeeeio de css espalhado...

 

O que eu quis dizer sobre grid dentro de grid é mais ou menos isso:

(baseando-se no seu grid)

2sbwcq9.jpg

 

Não sei se tem sentido usar isso.. já que a própria div do grid pai já se ajusta...


você pode utilizar suas próprias classes em conjunto ou dentro dos elementos do grid, apenas atente a deixar todo o trabalho de definir largura, espaçamento e "floats" para o grid em si, ou seja, no teu css, você não vai ter as propriedades width, padding, margin ou float (praticamente).

 

Pode ser um dos motivos de eu ter que ficar corrigindo bastante coisa.

Mais tarde vou dar uma revisada nos meus códigos e tentar eliminar todo o excesso de width, padding e margins.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Hum.. o container manda no elemento.

 

Veja q se vc quer dentro de uma 3/5 + 1/12 não soma 1 inteiro. Então aquela sua segunda linha não está respeitando o grid.

 

Dentro da half, se vc quer dividir ela em duas, vc usa outras 2 halfs dentro. Pois half é sempre metade. Lembre-se que o grid é líquido.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Hum.. o container manda no elemento.

 

Veja q se você quer dentro de uma 3/5 + 1/12 não soma 1 inteiro. Então aquela sua segunda linha não está respeitando o grid.

 

Dentro da half, se você quer dividir ela em duas, você usa outras 2 halfs dentro. Pois half é sempre metade. Lembre-se que o grid é líquido.

 

Sim, eu sei. Apesar usei qualquer coluna no exemplo.. queria apenas destacar o "grid dentro do grid" alí.

 

Mas então tá.. vou usar colunas dentro de colunes entao.. MAS.. eu preciso usar novamente a div container?

Tipo:

<div class="container">
  <div class="col-half">
   <div class="container">
    <div class="col-half">conteudo</div>
    <div class="col-half">conteudo</div>
   </div>
  </div>
  <div class="col-half">conteudo</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não, não precisa.

 

Olha o css dela:

.content { margin-left: auto; margin-right: auto; float: none; }
só use o css que você precisa.

 

A idéia de usar grids é deixar o teu css(que você vai escrever), mais enxuto.

Sem aquelas propriedades que citei no meu outro post.

 

Execute esse exemplo para você ver:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="column-gs.css">
    <style>
    [class*="column-"] {
        background: #ccc;
        height: 100px;
        border: 1px solid red;
        margin-bottom: 20px;
    }
    </style>
</head>
<body>

<article class="content column-full">
    <div class="column-half">
        <div class="column-half">

        </div>
        <div class="column-half">

        </div>
    </div>
    <div class="column-half">

    </div>
</article>

<article class="content column-full">
    <div class="column-third">
        <div class="column-half">

        </div>
        <div class="column-half">

        </div>
    </div>
    <div class="column-third">

    </div>
    <div class="column-sixth">

    </div>
    <div class="column-sixth">

    </div>
</article>

</body>
</html>
Apenas avalie se vc precisa mesmo de elemento dentro de elemento.

Muitas vezes apenas deixar fora, já resolveria. (quanto menos elementos aninhados vc tiver, melhor para o seu documento)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito