can't get the 2nd section into a grid format
The grid just doesnt look right. Need the headers above the text and the text below like a column format
https://codepen.io/MD-2016/pen/YzjjezZ
27 Replies
trying to this spaced out better and things aren't clumped
Which one specifically?
The 3 cards section? "Mobile first", etc?
yeah
trying to get it like this
Like this?
yes 🙂
just need more gap spacing
I just did this.
🤦🏻
Grid approach.
that's what I got was grid
just no auto fit and min max
I think you might be targeting the wrong parent.
Might get dizzy, but make sure you're aiming for the correct parent.
how do you get the spacing between the other sections and header and paragraph of this section?
I think a row gap can do the header and paragraph
but idk about the others if thats padding or margin
Like this?
yeah
that's my goal
defeated again by padding and margins
Padding on the container to push the child inside, and some padding on the child for consistency, but could be just playing around for the right values.
indeed
I did the first version using flex only
I wanted to see how well grid does with it
any tips on getting the margin and padding right? like any visual tool that could help besides just dev tools?
Just eye, try different values.
0.5em > 0.75em > 1em > etc.
It's pretty common to use certain padding/margin values.
I know kevin suggests doing outlines with borders
Outlines with borders?
yeah
outline: 2px solid red;You mean, emulate a border with outline?
yeah