Add [feature]: Grid Layout of Campgrounds

[MitulSonagara]

📋 Description

I have fixed the campground layout using grid layout

🔨 Changes Made

✅ Checklist

Before submitting the PR, please make sure you have completed the following:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings.
• I have tested it locally and it works fine.
• Any dependent changes have been merged and published in downstream modules.

🏷️ Types of Changes

What type of changes does your code introduce? (Check all that apply)

• Bug fix (non-breaking change which fixes an issue) 🐛
• New feature (non-breaking change which adds functionality) ✨
• UI enhancement (non-breaking change which enhances UI) 🎨
• Documentation update 📚

🤝 Related Issues

• Fixes Add [Feature]: Grid view for campsite showing #125
• Fixes [UI] Show All Campground using grid view #115

📸 Screenshots (if applicable)

Reminder:

Please ensure your pull request is made to the test branch, not main.

Thank you for contributing to VigneshDevHub! We look forward to reviewing your PR and getting it merged!

[MitulSonagara]

@Vignesh025

Please review this and merge it

[Vignesh025]

It's still the same. Everything is breaking.

[MitulSonagara]

@Vignesh025

this is working fine on my local system

i didnt uploaded the pics thats why it is looking like this

[Vignesh025]

this is working fine on my local system

Look at the navbar
compare it with the deployed website
you can see the difference
also appearance wise we can see some padding changes

[MitulSonagara]

@Vignesh025

only navbar issue is there?

[Vignesh025]

only navbar issue is there?

There are few padding issues as well. If you check it with the deployed website, you'll notice.

[MitulSonagara]

@Vignesh025

Ya i know but i changed some padding suitable for the grid layout

[Vignesh025]

Hey, the grid layout is not properly responsive. Here are the changes needed:

Below 580px: 1 card per row
From 580px to 780px: 2 cards per row
From 780px to 1024px: 3 cards per row
Above 1024px: 4 cards per row
Also, there are some UI issues:

The sort button's UI is breaking
The search button's UI breaks after a search
The dropdown button on mobile screens is also breaking
The padding change you made on the campgrounds page is affecting the view page
The 'View' button inside each card should be positioned at the bottom of the box
Please address these issues.