I'm starting to get a little more comfortable with CSS grid. This project was a great way to develop that further. I used the nth-child
pseudo-selector to order and style individual elements, but next time I think I would rather use specific classes to select individual items.
I initially thought the quotation mark background would be difficult, but I was able to do it quite easily using absolute positioning and a translate
transform, along with z-index
to make sure the card text appears on top.
I'm not sure if I implemented the grid in the best way. I ended up using order
. I wonder if it's possible to write the grid in a way that it just flows correctly and is thus responsive, including for mobile, without making a lot of changes to each card. I had to reset the order attribute for each card, for example. I did use span
instead of hard-coding the start and end rows though.
I'd like some feedback on how I could improve my CSS grid setup. Also, is it okay to use nth-child
selectors as I did, or is it better to use specific CSS classes? My hunch is the latter, but I'm curious to hear what others think.