Four card using Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi

  I’m afraid you’re not grasping the power of grid here… there should be no position absolutes or relatives in this challenge, and the box sizes and spacings should be defined by the grid template itself

  I recommend

  • one h1, not a h1 then h2 for the page title. It reads as one sentence so should be in the same meaningful element
  • using grid for mobile and larger screen layout. It’s fine for a grid to be one column to start with. This allows you to use gap to separate the cards straight away
  • try out grid template areas. I think that will help you visualise what you’re trying to do. Sometimes sketching the grid on paper can help you work out what’s needed
  • in your grid change first row height to auto (for the intro)
  • for the part of the grid with the cards, the grid is missing 2 rows. Draw a grid over the 4 boxes on your paper and you’ll see it needs 4 rows for the cards and three columns.
  • remove heights widths and margins from the cards. Let the template define how big the grid areas are and let the cards take up the space defined in that grid.

  You might find you need to add a mid sized grid in a media query, see how you get on

  Marked as helpful

  2

  ---

  

  Herson•220

  @HersonmeiPosted almost 3 years ago

  Hi @grace-snow!

  Thank you so much for all your observations!

  I will apply all the points you mentioned and study the CSS Grid more in depth before moving on to the next project!

  0