Four Card Feature Section with Grid Layout

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 3 years ago

  Hi @egemendemir,

  I've just taken a quick glance at your solution, not analysed it in any great depth, so this is just an off-the-cuff response :)

  I'm not sure I'd say they were "bad practices" exactly - you seem to have realised the design in a way that's responsive and robust... for the specific content at least!

  That said, using min-height and position: absolute doesn't especially fit with an approach that uses grid. For example, if you add a few more paragraphs of content to a card, the image will cover the copy; you need the component to be tolerant (within reason!) of a range of content.

  I would make use of flex to do layouts within the grid items (check out layout land youtube channel) rather than absolute positioning - responsiveness is the name of the game these days!

  I also have a policy of letting components expand (like a gas!) to fill whatever space is available to them, and letting the layout structure at the next level up constrain them. In this case, the grid container could set minmax() rules on the rows to get the size range you want.

  Hope that helps!

  0