Responsive news homepage using CSS Grid and jQuery

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 6 months ago

  Hi @Arkadiusz-Lenik!

  The developed solution looks great! Below are some suggestions for improvement:

  ---

  Misalignment in News Section

  The precise alignment of the news cards is missing. The intended layout should be:

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

  You’ve used CSS Grid, which is a great approach!
  However, the issue arises because:

  • Grid items span multiple columns, and
  • Inner flexboxes introduce inconsistent spacing.

  Better Approach:

  • Avoid spanning grid items across multiple columns and inner flex boxes for alignment.

  • Instead, make each card (or even sections of the card) a direct child of the grid.

  • This ensures consistent gaps between elements, making precise alignment much easier!

  • You can maintain the same HTML structure while still making each card a direct child of the grid by using:

    display: contents;
    

  • How display: contents; helps?

    • It makes a wrapper act as if it doesn’t exist in the grid.
    • The children behave as direct grid items, achieving the required layout effortlessly.

  ---

  Everything else looks great! Keep up the amazing work! 🚀

  01

  Marked as helpful