3 Column Preview card component with CSS Grid

Community feedback

• 

  Jenna•125

  @jamby4546Posted over 3 years ago

  I think the general practice is that if you are only arranging boxes in the x direction, to use flexbox. If you have a layout that needs boxes arranged in the x AND y directions, use CSS grids.

  But honestly I prefer CSS grids every time even for a single line of boxes because I feel like it is easier to change if the design changes later on and it is more flexible. I am still a beginner though, its just what is easier for me to think about! It probably comes down to preference but I am not sure

  0

  ---

  

  Jeanette•60

  @JeanetteWPosted over 3 years ago

  @jamby4546 Hi Jamby, thanks for the reply. Your explanation of when to use flexbox and when to use grids does make sense.

  I also prefer grid. Just feels like placing elements is easier.

  0
• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Jeanette,

  Congrats for completing the challenge ! 🙂

  Here Flexbox is pretty convenient as it's pretty straightforward with the property flex : direction to switch from a line or a column. For linear designs Flexbox works pretty well.

  I'd like to suggest :

  • Adding min-height : 100vh to your body to make sure it covers the entire viewport.

  • Making your body a flex container with properties display: flex, justify-content: center, align-items: center and flex-direction: center to center your .container class on the page.

  If you want to implement it with Flexbox you can check my version of the challenge where I've used it. I think it's simpler than Grid here.

  Overall, well done for the challenge and happy coding ! 😃

  0

  ---

  

  Jeanette•60

  @JeanetteWPosted over 3 years ago

  @RayaneBengaoui Thank you so much for your response. It seems I still miss the little details which makes a huge impact on a final design. I will definately make notes of your suggestions.

  0