@Flashdaniel
Posted
Nice work. I like to point a few things:
- Use headings h1, h2 ... h6 orderly, not h2 then h2 again like in your code.
box-sizing
property is not inherited, so adding it to the body element only affects the body. if your thought was to all the elements. Do this
*,
*::before,
*::after {
box-sizing: border-box;
}
You can make your site more responsive by changing the .parent { grid-template-columns: 1fr; }
to .parent { grid-template-columns: repeat(auto-fill, minmax( your, 1fr); }
.
Learn to make use of the repeat()
function, instead of grid-template-columns: 1fr 1fr 1fr;
Do grid-template-columns: repeat(3, 1fr);
. And don't use grid-template-rows
if it's not necessary like in your case, allow Auto-placement in grid to make that decision for you.
Marked as helpful
@kendo-desu
Posted
@Flashdaniel Thank you for your comment and all the tips, I find them very helpful as I'm a complete beginner who has just started learning to code last month.
I understand all the points you raised except the repeat(auto-fill, minmax(your, 1fr);
part. Is it possible for you to elaborate more on that?
@MattPahuta
Posted
@kendo-desu
I'm no Grid guru but I have found Kevin Powell's content immensely useful for tackling most every layout challenge I've come across. He has a lot of good stuff on Grid and flexbox, but here's a quick and simple video that I think will send you on the right path. Cheers!