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
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.