Hi everyone! I’ve completed the Fundamental Layout Comprehension project, and I think my finished product is correct, but I wanted to be sure. Thanks for any feedback you can offer!
Link to my project: https://codepen.io/RiscloverYT/pen/zYdwMxP
Link to original assignment: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
Hi @RiscloverYT and welcome to the community 
Congratulations! 
The result looks as requested.
I have one question an a few improvements/simplifications:
The grid class which defines the layout for <main> should ideally use grid instead of flexbox. Do you know how you could achieve it with grid?
position: relative; isn’t needed for the floated image. When removing it you can also get rid of z-index: 1; in nav
The default value of flex-direction is row. There is no need to write it explicitly. (But also isn’t wrong)
You use grid-template-columns: auto auto; for the photos on the right. I recommend using grid-template-columns: 1fr 1fr; to make same-size columns. I doesn’t make a difference in this task since the images are the same size. This would differ if you had text content in the grid.
I hope that helps! If anything is unclear feel free to ask. 
Have a nice day!
Michael
Hi Michael,
I feel silly. Of course the grid class is meant to have a grid for the display instead of flex… lmao why did I do that?
To answer your question, I’m thinking that I can put this under .grid:
display: grid;
grid-template-columns: #fr #fr
And that will achieve the same sort of result, correct?
Good to know your other comments are just little things I can do to tighten my HTML and not major errors. Thank you very much!
Sara
No need to feel silly. We are here to learn and mistakes only make us better. 
I’m not sure if the # characters in your example are meant to be placeholders for numbers or literal characters (#fr isn’t a valid unit itself). A good solution for this exercise would be:
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 20px;
fr stands for a fraction of the remaining space. This would divide <main> into three quarters for <article> and one quarter for <aside>. An advantage of this over your flex code is that <aside> gets wider when there is more space available.
Exactly. I like to point out such small things when there aren’t any big mistakes. It may give ideas/perspectives for learners who already are on a good level like you are.
Michael