Mobile-first workflow with CSS Grid

Community feedback

• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Achref,

  By using place-content, behind the scene, we are adding special styles to grid-container (grid-template-columns: min-content; and grid-template-rows: min-content;) which make each grid-items shrinks so we can place them easily according to the value of place-content.

  Those additional styles won't work if we assign fraction unit value to grid-template-columns. Fraction unit provide grid-item the ability to occupy existing space (similar to grow in flex) and this will make grid-container difficult to manage position of grid-items.

  Hope this clear :)

  Marked as helpful

  1

  ---

  

  Achref KS•530

  @AchrefFastPosted almost 3 years ago

  @al3xback

  Hi Alex,

  So since we assign fraction unit to the grid-template-columns, there will be no empty space in the grid container anymore(because the fr will make sure each item will stretch to occupy its fraction), which will make the place-contain property ineffective.

  Well explained, thank you so much Alex.

  1
• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Achref,

  I think for this case we dont need to use place-items. This will break the layout if the grid-item doesn't have paragraph element. Attached screenshot for this case. (https://prnt.sc/23dredg)

  and for place-content, it doesnt have effect if we combine with fraction unit(fr) on grid-template-columns (cos usually only work for px or auto).

  Marked as helpful

  1
• 

  Achref KS•530

  @AchrefFastPosted almost 3 years ago

  Hi Alex,

  Thank you so much for taking the time to look into my solution, I really appreciate that.

  When working with grid ,I always get confused between the place-items and place-content properties, and I end up using both of them to make sure that everything is centered.Actually, I didn't know that the place-items could result in breaking the layout when it used the wrong way. Thank you for letting me know.

  Concerning the place-content with the fraction unit , can you please clarify why the place-content has no effect.

  Thank you kindly.

  0