Dificuldades com o grid do Jeet.gs

[ribeiroevandro]

Personas, boa noite!
Eu tenho o seguinte problema, a imagem abaixo serve para ilustrar a situação, vamos lá. Eu tenho uma div pai que está com col(12/12) e os blocos vermelhos inseridos apenas para ajustar o grid da forma que preciso, estão com col(4/12). Eu sei que para ajustar o espaçamento entre eles de forma que fique certo de acordo com a coluna, uso o gutter porém, se repararem pelo primeiro bloco vermelho, ele não respeita as 4 colunas e é nesse ponto minha dificuldade em ajustar o grid, alguém já teve esse problema e saberia como me auxiliar? Já pesquisei na internet e acredito que não soube como buscar, pois nenhum dos resultados me ajudou com o problema.

[felipefialho]

@ribeiroevandro Consegue colocar o problema isolado no jsfiddle pra verificarmos?

[ribeiroevandro]

Consigo sim, vou fazer mais uns testes aqui, depois de uma noite de sono quem sabe eu consiga resolver 😛

[ribeiroevandro]

@lfeh não consegui muitos avanços, tentei definir o tamanho do elemento pai com uma medida fixa, para ver se as colunas se comportavam como eu esperava, porém sem sucesso... Tentei reproduzir o problema no Codepen e segue os links...
Pen full
Pen edit

[felipefialho]

É isso que você quer?

http://codepen.io/LFeh/pen/BKqwWW?editors=1100

Lembre-se que as medidas do Jeet não são fixas então não vai se adaptar perfeitamente nesse grid de background.

[ribeiroevandro]

Nessa proposta que você sugeriu, eu deveria trabalhar os espaçamentos entre os blocos com margins e não deixar o jeet cuidar? Porque o problema está sendo em casar as colunas certas e manter o espaçamento entre as colunas... Não sei se estou sabendo me expressar e muito provavelmente não esteja :/

[felipefialho]

Você tem que ter em mente que o Jeet usa colunas proporcionais e não fixas, então vai ser impossível encaixa-la perfeitamente na imagem, nem faz sentido. O grid é só uma base.

Por exemplo.

Você sabe que em um container de 1000px, com 10 colunas, cada coluna terá 100px. Se tiver gutter entre elas, o tamanho da coluna diminui para caber o espaçamento.

Não tente seguir tão a risca cara, converse com seu designer. Isso simplesmente não faz sentido.

[dionarodrigues]

Pegando o gancho nessa issue, um problema que costumo enfrentar com o Jeet também é na questão responsiva: quando determino uma divisão das colunas para as li de uma lista, por exemplo, ao determinar outra configuração para um breakpoint maior (levando em consideração o mobile first), buga tudo. Ou seja, o Jeet não consegue recalcular. Assim, sempre tenho que usar o column somente em um breakpoint. Acontece com vocês também?

[felipefialho]

@diogorodrigues É um problema. Infelizmente, toda vez que precisar de um novo breakpoint precisa colocar toda a configuração do grid, inclusive gutters, cycle, etc.

E se atente no seguinte detalhe.

Se tiver um grid usando cycle: 2 para determinada resolução, e em uma próxima você precisar que ele tenha 3 colunas, você vai precisar usar: col(1/3, uncycle: 2, cycle: 3)