Design comparison
Solution retrospective
Be able to short out how to use grid style to center the start and end cards to the center.
What challenges did you encounter, and how did you overcome them?Understanding how grid-areas works.
What specific areas of your project would you like help with?Is there any way to make a grid
responsive without breakpoints, like we using flex-wrap
in flex-box to automatically wrap children?
Also, in my breakpoint, I have to use !important
in CSS to override the value of grid-area
, but in my previous challenges, I didn't need to use it. Is it because the :nth-child
selector is more important than main > article.card
? How to overcome it?
main > article.card { grid-area: initial !important; }
Community feedback
- @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 umminmax
, 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 domain
, 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 helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord