Wendy• 1,890
@wendyhamel
Posted
Hi, your solution to this challenge looks good!
You said you would like feedback on optimizing the grid and I am happy to provide you with some tips.
- For starters, you are on the right track using grid for this. You could improve the responsiveness by omitting the use of a set height and width on the cards. This way, you can let the grid and the
1frunit do the work of distributing the content. - Also, you could use
gap: 10pxon the container of the cards (class="app"in your case) instead of the margins. This way you only have to declare it once, can be used with flex and grid and will help the browser to calculate the afailable space left to place the cards. - The use of
pxunits restricts the responsiveness of your site. You could try to use more relative units likerem,em, viewport sizes and percentages. MDN docs: Values and units - I noticed you can improve semantics on you solution by wrapping the content in a <main> element and the attribution could be the
<footer>.
Happy Coding!
0
