Assessment wanted for Fundamental layout comprehension 1091

[Leo1091 (Leonardo)]

Hi all, first of all I wanted to thank the creators of the “mdn” guides, they helped me a lot and are the best I’ve found.
finally I wanted to share my work to receive an evaluation and ask how I can get the same result in the grids without using media queries. I’ve tried rules like “auto-fit” and “minmax” but they give me an acceptable result only in case the columns are the same width.
Thanks again, regards.

My work:
“https://codepen.io/leo1091/pen/KKGXMEj”

Mdn page:
“https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension”

[mikoMK (Michael Koch)]

Hi @Leo1091 and welcome to the community

@Leo1091

first of all I wanted to thank the creators of the “mdn” guides, they helped me a lot and are the best I’ve found.

I’m glad to hear that.

@Leo1091

finally I wanted to share my work to receive an evaluation

You have correctly set all the CSS properties. Congratulations!

@Leo1091

and ask how I can get the same result in the grids without using media queries.

As you already mentioned, auto-fit can only be used when you want equally sized columns. So you can use it for the photos grid but not the main grid. I don’t see a way to replicate the functionality without using media queries.
In general, there’s nothing wrong in using media queries. There may be situations where a clever grid configuration can replace them, but it’s still perfectly fine to use media queries in modern code.

I hope that helps.

Have a nice day,
Michael

[Leo1091 (Leonardo)]

Thanks for your help and rating.
good day and see you next time.