我正在开发一个网页，它显示了一个名片列表，每个名片代表一个公司。我想安排这些名片在网格布局的基础上屏幕的纵横比。在较大的屏幕上，我希望卡片以每行多张卡片的网格形式显示，而在较小的屏幕上，我希望它们堆叠在一列中以提高可读性。
以下是我遇到的具体问题：
在大屏幕上，名片不会以网格布局排列。即使每行有足够的空间显示多张卡片，它们也会显示在一列中。
在较小的屏幕上，名片堆叠在一列中，这很好，但它们没有正确地居中，并且两侧有过多白色。
我尝试使用CSS Grid和媒体查询来实现所需的布局，但我的实现似乎不能正常工作。
我已经尝试调整CSS中的grid-template-columns和grid-gap属性，但是卡片仍然没有按照预期的方式排列。
我目前正在一台屏幕分辨率为1920 x1080的Windows PC上测试谷歌Chrome浏览器（99.0版）上的网页。
下面是我的一段用于显示名片的HTML代码：

<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>

字符串
下面是我的JavaScript代码片段，用于动态创建名片：

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);
});

型
我的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;
}

型
我正在寻找如何修改我的CSS和JavaScript代码的指导，以实现所需的大屏幕上的网格布局和小屏幕上的单列布局。任何帮助是赞赏！