[BUG] Dynamic Grid Layout for Case Studies Page Based on Number of Items

[Adi-204]

Describe the bug.

The current implementation of the Case Studies page uses a hardcoded grid-cols-3 class for the grid layout. This causes an issue when there are fewer than 3 items (e.g., only 2 case studies), resulting in uneven spacing and a less aesthetically pleasing layout.

Expected behavior

The grid should adjust based on the number of case studies available. If there are fewer than 3 items (e.g., 2 or 1), the grid should dynamically adjust to display them in a more appropriate layout (e.g., grid-cols-2 for 2 items, grid-cols-1 for 1 item).

Screenshots

How to Reproduce

Steps to Reproduce:

1. Navigate to the Case Studies page (https://www.asyncapi.com/casestudies).
2. Observe the grid layout when there are only 2 case studies displayed.
3. Notice that the grid looks uneven with large empty spaces.

🥦 Browser

Google Chrome

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Adi-204]

Please assign me the issue I would like to contribute.