@BenjaDotMin
Posted
Hello there!
You really do have a great grasp with grid, for your first attempt. Much better than I did!
However, regarding your question:
- To your body tag add: height:100vh; display: grid; place-items: center;
- To your main tag add: max-width: 1440px;
That should improve the size and positions. You can play around with values to match what you need.
It wont make a difference, but consider the shorthand syntax for grid-template, to save yourself repeating values and make it easier to read.
For example: grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
Could simply become: grid-template: repeat(2, 1fr) / repeat(4, 1fr);
Marked as helpful
@Mattvp21
Posted
@BenjaDotMin Ahhh! I was wondering why justify content didn’t work! Thanks
@BenjaDotMin
Posted
@Mattvp21 Not a problem :)