Four card feature section using css grid

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá David, mais um vez, parabéns pelo seu projeto, ele ficou muito bom.

  Sobre sua primeira pergunta, sim, dá pra você fazer isso utilizando o auto-fit com um minmax, por exemplo:

  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  O que acontecerá será o seguinte: Ele irá criar X (que dependará do tamanho do elemento pai) colunas que terão no mínimo 100px de largura, e isso quando elas couberem no elemento pai. Agora, se o elemento pai têm por exemplo 500px de largura, ele irá conseguir acomodar apenas 5 colunas, se tiverem 6 colunas, a 6ª coluna irá para a linha debaixo.

  Sobre sua segunda pergunta, sim, o :nth-child(x) dá um especificidade a mais, para você não usar o !important você poderia, repetir os trechos de:

  main > article:nth-child(x) {
    /* Omitido */
  }
  

  e apenas colocar o grid-area: initial;, que daí funcionaria.

  E agora uma cosia mais da minha opinião, notei que no seu html, na sua <main> você tem um classe, mas essa classe não está sendo utilizada em nenhum lugar do seu CSS, geralmente eu retiraria, mas é só uma questão de opinião, isso não está errado. E uma outra coisa é quanto ao uso do operador >, você não precisa utilizar ele nesse caso do main, ele poderia ser removido, isso porque todos filhos direto dele são <article> e também porque ele não tem netos <article>, mas isso também, não está errado.

  E novamente parabéns pelo seu projeto, ele está muito bom mesmo, html impecável e css também. Caso algo que eu tenha dito não tenha ficado claro, por favor, pergunte aqui embaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  1