Html – How to display business cards in a grid layout based on screen aspect ratio in JavaScript and CSS?

I’m working on a web page that displays a list of business cards, each representing a company. I want to arrange these business cards in a grid layout based on the screen’s aspect ratio. On larger screens, I’d like the cards to be displayed in a grid with multiple cards per row, while on smaller screens, I want them to stack in a single column for better readability.

Here are the specific problems I’ve encountered:

The business cards are not arranging themselves in a grid layout on larger screens. They appear in a single column even when there is enough space to display multiple cards per row.

On smaller screens, the business cards stack in a single column, which is good, but they are not properly centered, and there’s excessive white space on the sides.

I have attempted to use CSS Grid and media queries to achieve the desired layout, but my implementation doesn’t seem to be working correctly.

I’ve tried adjusting the grid-template-columns and grid-gap properties in the CSS, but the cards still don’t arrange as expected.

I’m currently testing the webpage on Google Chrome (version 99.0) on a Windows PC with a 1920×1080 screen resolution.

Here’s a snippet of my HTML code for displaying the business cards:

  <div class="search-box">
    <select id="search-name" class="search-select">
      <option value="">Select a Company</option>
      <option value="Abernathy Defence & Aerospace">Abernathy Defence & Aerospace</option>
      <option value="Aeronautico Torricelli">Aeronautico Torricelli</option>
      <option value="Baltin Aerospace">Baltin Aerospace</option>
      <!-- Add more companies here... -->
    </select>
    <select id="search-category" class="search-select">
      <option value="">Select a category</option>
      <option value="Tanks">Tank</option>
      <option value="Aerospace">Aerospace</option>
      <!-- Add more categories here... -->
    </select>
    <select id="search-location" class="search-select">
      <option value="">Select a location</option>
      <option value="Baltin">Baltin</option>
      <option value="Helvery">Helvery</option>
      <option value="UPA">UPA</option>
      <!-- Add more locations here... -->
    </select>
    <button onclick="searchBusinesses()" class="search-btn">Search</button>
  </div>
  <div class="resultsDiv">
    <div id="results">

    </div>
  </div>

And here’s a snippet of my JavaScript code for dynamically creating the business cards:

const businesses = [
  { name: "Abernathy Defence & Aerospace", category: "Aerospace", location: "UPA", logo: "ADA.png" },
  { name: "Aeronautico Torricelli", category: "Aerospace", location: "Helvery", logo: "torricelli.png" },
  { name: "Baltin Aerospace", category: "Aerospace", location: "Baltin", logo: "baltin.png" },
  { name: "Bos Industries", category: "Arms", location: "ARC", logo: "bos.png" }
  // Add more businesses here...
];

function searchBusinesses() {
  const categoryInput = document.getElementById("search-category").value;
  const locationInput = document.getElementById("search-location").value;
  const nameInput = document.getElementById("search-name").value;

  const filteredBusinesses = businesses.filter(business =>
    business.category.toLowerCase().includes(categoryInput.toLowerCase()) &&
    business.location.toLowerCase().includes(locationInput.toLowerCase()) &&
    business.name.toLowerCase().includes(nameInput.toLowerCase())
  );

  displayResults(filteredBusinesses);
}

function displayResults(businesses) {
    const resultsDiv = document.getElementById("results");
    resultsDiv.innerHTML = '';

    if (businesses.length === 0) {
        resultsDiv.innerHTML = '<p>No businesses found.</p>';
    } else {
        businesses.forEach(business => {
            const card = createBusinessCard(business);
            resultsDiv.appendChild(card);
        });
    }
}

function createBusinessCard(business) {
    const card = document.createElement("div");
    card.className = "business-card";

    if (business.logo) {
        const logoImg = document.createElement("img");
        logoImg.src = business.logo;
        logoImg.alt = business.name + " Logo";
        card.appendChild(logoImg);
    }

    const nameHeading = document.createElement("h2");
    nameHeading.textContent = business.name;
    card.appendChild(nameHeading);

    const categoryParagraph = document.createElement("p");
    categoryParagraph.textContent = "Category: " + business.category;
    card.appendChild(categoryParagraph);

    const locationParagraph = document.createElement("p");
    locationParagraph.textContent = "Location: " + business.location;
    card.appendChild(locationParagraph);

    return card;
}

// Call displayResults with the businesses array to display all companies at the start
document.addEventListener("DOMContentLoaded", () => {
    displayResults(businesses);
});

and my css:

/* Business Cards Grid */
.resultsDiv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
}

.business-card {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.business-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.business-card h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.business-card p {
    margin-bottom: 5px;
}

I’m looking for guidance on how to modify my CSS and JavaScript code to achieve the desired grid layout on larger screens and a single-column layout on smaller screens. Any help is appreciated!