Four Card Feature Section using (S)CSS Grid

You might enjoy grid template areas instead of grid lines at each breakpoint BTW. I find it a lot simpler.

And I wouldn't bother about ie. In a real project autoprefixer or similar would output what it needs automatically anyway.

Last tip - use classes for styling, and consider nth child for the grid items

Good luck

@grace-snow ok cool thanks! on the "classes instead of ids" point, am i right in thinking that id's are mostly used for javascript identifiers?

Just updated with grid-template-areas - what a great feature! Literally cuts the number of media queries i had in half.

@fraserwat no I wouldn't use ids as identifiers in javascript, I use js- prefixed classes. That way there's no chance of javascript being broken accidentally (by me or other devs changing an ID) and means I can queryselectorAll

IDs are unique anchors. So they are used for linking between places in the html. That could be navigational jump links, for label elements in forms, for aria- attributes etc

@kofinartey what do you mean by 'go beyond'? You mean smaller than 375px?

My phone is only 320px wide, so a min width that large would break layout on my mobile. Usually 280-300 is the minimum screen width we design for. Smaller than that would be specific media queries for devices like watches