User card with grid
Introduction
Grid is good for many things. It’s great for grids. But it also has some other benefits. Flexbox has order which can really help with shuffling the various elements for different screensizes / but it’s one-dimensional. This is where Grid can completely change how we think about divs and groupings in our markup.
The layout
Here it is. Found on Discord. Maybe we’ll draw it better / or just get a higher res example… but it’s fine.
Step one
Try and make this / without CSS Grid. Use anything you can think of.
Write the ideal markup first – and share it with us. Sketch out the boxes. Show us all of your thought processes.
YOU write it first. Here’s our Pen (to check afterward)
Maybe you can do it! Maybe you can’t.
Write all the things down and share them with us. Get serious about it.
Step two
Now: Do all that stuff / but this time you can use CSS Grid.
Changes
Show us your work. We’ll give you some arbitrary changes to show the strengths and shortcomings of both approaches.
That’s that!