Four card feature section using grid, flexbox

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted about 1 year ago

  Hello @devusexu!

  To answer your question, using repeat(3, 1fr) or using repeat(3, 20rem) is actually okay.

  • Use 1fr for situations where you want columns to adapt proportionally to the available space, creating a flexible design.
  • When you need precise control over column sizes you can use explicit grid values like repeat(3, 20rem). (people actually do this a lot)

  So it's quite alright to use repeat(3, 20rem) and in this solution since you are using flex to center all the stuff using it works rather than fr since fr depends upon the available space and being in the center due to body flex the grid doesn't have much space to allocate to the grid items hence they get squished as 1 fr tries to equally make 3 columns with the little space it has.

  By the way nice solution! Good semantics and good design!

  Keep up the good work and happy coding!🙌🏻

  Marked as helpful

  2

  ---

  

  devusexu•130

  @devusexuPosted about 1 year ago

  Hello @adityaphasu, it's pleasant to have you again!

  Thanks for your clear explanation, encouragement and letting me know that people do actually use this practice💪

  Keep up the good work and happy coding to you too 😎

  1