Forma correta de usar as "cols" em um GRID

[andre-mendes]

Fala meus queridos :{D

Tava conversando com um pessoal aqui do trampo, até que entramos no seguinte questionamento....

Quando eu vou usar um sistema de grids, o do bootstrap, por exemplo...

é errado eu usar as "cols" em uma tag "a" ou outra??
Eu tenho que usar as cols sempre em uma tag "div", ou posso usar em qualquer tag e fogo na bomba?

Eu vejo a col apenas como uma classe que vai definir o tamanho do meu elemento, e, se eu quero varias "caixas" que vão ser links, pq eu deveria abrir uma "div" pra definir o tamanho e depois abrir uma tag "a"??

Sei que funciona e tal, mas gostaria de saber a opinião de vocês a respeito, olhando pro lado semantico, clean code...

O que costuman fazer? :)

vlw ;*

[felipefialho]

Cara, depende muito do contexto do projeto.

Mas basicamente, como você mesmo disse, são apenas classes.

Você pode usar com qualquer elemento, seja section, article, div e até mesmo a ou outro inline.

Uma dica é começar a usar grids semânticos como o Jeet e o Lost, dessa forma acredito que essa "confusão" na sua cabeça vai diminuir.

Caso queira ler mais: #13 #139 #134

;)

[andre-mendes]

Pô, maneiro :D vou dar uma olhada nessa issues, e nesses grids que vc comentou @lfeh .... Mais uma vez, vlw a força :{D

[ghost]

Bom, eu sempre vi as grids como uma estrutura para o conteúdo. Vou tentar explicar melhor o meu ponto de vista. Vamos lá!

1. Levando em consideração a ideia de modularizar o código, criaríamos componentes a serem reutilizados em qualquer área do site, sendo assim, a ideia é não atribuir tamanho e nem float no componente.

2. Estruturaríamos o site utilizando as grids e dentro delas colocaríamos o componente de forma independente, logo, o mesmo se adequaria ao tamanho do espaço reservado pela grid.

3. Em caso de exceção à regra, usaríamos uma classe modificadora. Assim, manteríamos o css 100% reutilizável sem atrelar aos componentes a responsabilidade de diagramar o template.

4. Caso houver uma manutenção no código que diz respeito ao template, teríamos toda estrutura pronta para alterar somente o tamanho das grids. E também poderíamos alterar qualquer componente sem se preocupar em "quebrar" o layout.

Bom, não sei se pode ser uma "viagem" da cabeça, mas sempre vi casos que poderiam ser facilmente resolvidos caso seguissem essa linha de raciocínio.

Utilizei o jeet por um tempo e depois fui para o lost, porém sempre me incomodei de usa-los no próprio componente. 😞

Atualmente estou usando a grid do boostrap 4, além de ter um novo breakpoint em que atende 99% dos casos, possui a opção do flexbox. 😄

[felipefialho]

@wdss93 Seu pensamento é perfeito.

Realmente a ideia é não atrelar tamanho aos componentes, e sim os componentes se adaptarem ao grid do template.

Porém, é totalmente factível, o componente ter um grid próprio dentro dele, que deve ser isolado dentro do próprio componente. E ai que grids como Jeet ou Lost funcionam perfeitamente.

Você deu uma boa introdução ao Atomic CSS que utilizo :)

[andre-mendes]

@wdss93 FODA!! :D clarou ainda mais minha cabeça 💃

e o @lfeh complementou mto bem falando sobre o Jeet/Lost :D :D

e aproposito @lfeh , segui sua dica de testar um grid semantico, e estou gostando bastante do Lost \o/

vlw rapaziada