3-column preview card using Grid, Mobile-first & BEM

Community feedback

• 

  A.•390

  @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 helpful

  1

  ---

  

  FunkyCreep•130

  @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
• 

  A.•390

  @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