Como deixar meu Layout Grid Flexível ?

[LuisMatheus-dev]

Olá ! 👋
Estou criando um layout com CSS Grid , porem não consigo fazer com que ele se torne flexivel, tentei aplicar outras formas de construção e tutoriais no youtube para entender , mas ele sempre acaba não obedecendo o tamanho dos cards e não "quebra" quando chega no tamanho minimo.
Se alguem puder me auxiliar para entender como aplicar ficarei grato , porque estou a 3 dias nisso kkk
Segue o layout atual no CodePen

[onlurking]

Isso esta acontecendo porque tu está gerando 3 colunas de tamanho fixo, a solução é gerar essas 3 colunas mas com tamanho flexível, tu pode fazer isso dessa maneira:

grid-template-columns: repeat(3, minmax(0, 1fr));

https://codepen.io/onlurking/pen/GRpQyga

[LuisMatheus-dev]

@onlurking Bem sim, mas o problema é que o layout não se adapta, gostaria que ele tivesse esse comportamento:

Os cards de noticias manteriam o mesmo tamanho , os únicos que deveriam ser redimensionados seria o video e o podcast

[vhfmag]

Isso ajuda, @LuisMatheus-dev? https://codepen.io/vhfmag/pen/abvqrjb

Eu fiz algumas coisas:

• Tirei o grid-template-rows pra quantidade de linhas ser flexível e precisei colocar min-height: 380px no card do vídeo
• Tirei o grid-template-areas, mudei o grid-template-columns para grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) e incluí grid-auto-flow: row, pra quantidade de colunas ser flexível e os cards irem ocupando primeiro as colunas da primeira linha, depois as da segunda, etc
• Fiz o card do podcast ocupar todas as colunas com grid-column: 1 / -1 (-1= última linha ou coluna)
• Fiz o card do vídeo ocupar duas linhas (grid-column: span 2) caso o viewport seja maior que 530px

O que me incomodou na minha solução foi precisar usar media query, mas não sei nenhuma outra forma de mudar automaticamente o span de um grid item 😕

[LuisMatheus-dev]

@vhfmag Realmente era a minha ideia tentar optar por media queries , mas da sua forma ficou mais eficiente , seria mais pela didática por que alguns tutorias que vi o próprio grid 'quebrava' , como você pode ver aqui e por isso estava tentando buscar por essa solução

[vhfmag]

@LuisMatheus-dev Entendi! Na minha solução grid "quebra" (muda a quantidade de colunas e cards são movidos pra baixo), mas o card do vídeo gera problema porque enquanto ele tiver grid-column: span 2 a grid vai ser forçada a ter pelo menos 2 colunas (aí a quantidade de colunas nunca baixava pra 1). Como não sei nenhuma forma de expressar "ocupe duas colunas se existirem duas colunas", apelei pra media query