news-home-page

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted about 1 month ago

  Hi @Dadv-a11y!

  The developed solution looks great! However, I noticed an issue with alignment. Below are some important suggestions to achieve precise positioning.

  1. "Top 10 Laptops of 2022" should be exactly below the "Read More" button.
  2. "The Growth of Gaming" should be exactly below the "New" card.

  This isn't happening because the current approach:

  • Uses a 3-column CSS Grid layout ✅ (Good choice!)
  • But spans some grid children across multiple columns ❌ (Making spacing inconsistent)
  • Uses nested flex-boxes inside grid items ❌ (Increases complexity)

  Simplify the Grid Structure

  Instead of spanning grid items across multiple columns, make each card a direct child of the grid.

  Why is this better?

  • Maintains precise alignment of items.
  • Easier to manage spacing using just gap.
  • Reduces complexity of nested layouts.

  If You Still Want a Grouping Structure, Use display: contents;

  This allows maintaining HTML structure without affecting CSS Grid alignment!

  .card-wrapper {
      display: contents; /* Makes children behave as if they are direct grid children */
  }
  

  Now, even if the bottom cards are inside the same wrapper, the grid will treat them as direct children, keeping their alignment intact.

  ---

  Great job! Keep going! 🚀

  Marked as helpful

  0