Assessment wanted for Fundamental Layout Comprehension :)

MDN Learn
1

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

2

Hi @RiscloverYT and welcome to the community :wave:

Congratulations! :medal_sports: 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?

    HintUse grid-template-columns with different fr values

  • 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. :blush:

Have a nice day!
Michael

3

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!

:heart: Sara

1 Like
4

No need to feel silly. We are here to learn and mistakes only make us better. :slightly_smiling_face:

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