3-column preview card using Grid, Mobile-first & BEM
Design comparison
Solution retrospective
I'm kinda struggling for the global setup to handle the responsiveness of my apps.
- Should I set a specific height to the body of my HTML page ?
- Should the white space around the card be a margin on the card or on the body ? I'm always wondering wether to specify that space as a margin or as a result of centering my card using grid (but in that case I need to specify a height for my body right ?)
Community feedback
- @MooseCowBearPosted over 1 year ago
The way I like to think about components like this is: Can the way I'm writing the component be reused in a different layout without changing anything?
If you center the component by specifying a margin on the component itself, you'd have to alter the component if you were to embed it in a different space. Not a huge deal, but it's maybe more work than you want. I would be nice to not have to do anything. Positioning by using grid or flexbox on the body will allow your future self (or someone else) to be lazy (in a good way!).
You're right that you will need a height on the body in order to use grid centering. You can set the height (or even better the min-height) to 100vh. Then, since it's the only thing in the body, its center will be whatever the center of the window will be.
Marked as helpful1@francoisbilletPosted over 1 year ago@MooseCowBear Thank your for your answer. So how would you set the space around the card component ? Only using grid and place-content: center (for example) or would you set a margin on the body ?
0 - @MooseCowBearPosted over 1 year ago
You won't need a a margin. You can just do:
body { min-height: 100vh, display: grid, place-items: center }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord