Assessment wanted for Grid layout 1 skill test

MDN Learn
#1

Grid and Flex Layout 4:

My code:

Problem- My solution looks like the mozilla example. However, in order to achieve that and stack the tags exactly in the way they are positioned in the task, I use “grid-template-columns: 1.05fr 1fr 1fr”; This seems to do the trick and align the tags correctly, however, this code does not look very professional in my opinion. I tried to use “auto auto auto” , but then I am unable to align the items in the flexbox exactly like in the mozilla example. So my question, is there any other solution except using 1.05fr 1fr 1fr, which makes the first column slightly bigger so I can fit three words under the image…Any advice would be appreciated! Thank you, Kostadin

1 Like
#2

Hello!

It seems your codepen is missing some style and images, the Result part is unstyled. It is important that people can see the same code as you do.

Let’s fix that first:

  • Have a look at your CSS, you have the same code in both the HTML file and the CSS. You’ll want to keep only one place to declare your CSS code.

  • We can copy/paste the base css code from the example (body, .card, …)

  • I think you can’t upload images on codepen, maybe you can use a placeholder service, ex: https://via.placeholder.com/400x267.png

About the grid-template-columns: 1.05fr 1fr 1fr, I can’t see the result right now but I can assume that’s not exactly what you want.
Do you want the first column to be slightly bigger to match your page layout or to match the content? What if the tags are longer? You won’t be able to predict all the cases.
That’s beauty of grids, you don’t need to be pixel perfect, you define some rules and the browser do the work.

You’ll find a lot of quality stuff about flex, grids and layouts here: https://youtu.be/ZPtpzuRajzM

Hope this helps,

#3

Hi @Kostadin_Lalchev!

Hrm, this is quite interesting. Our marking guide answer is here: https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/marking.md#grid-layout-four

We are using the much simpler grid-template-columns: 1fr 1fr 1fr, which seems to work fine. What is the difference you are encountering?