如何在网格CSS中指定最大列数？

Question

我的 WordPress 页面是这样的：https://wechange.es 在“Accessorios”部分（右侧）中，我不想显示产品“iPhone Reacondicionado”，我该怎么做？它不是我可以修改的小部件或插件，它是主题的默认内容。

我考虑过添加个性化CSS并在网格中显示产品并隐藏最后一列/行，但我不确定如何隐藏部分。

Answer 1

要使用 CSS 网格实现您想要执行的操作，您需要正确使用 grid-template-columns 属性。如果要将列数限制为 4，可以使用重复函数与所需的特定列数相结合。这是一个例子：

    .your-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* This creates 4 equal-width columns */
    }

在此代码中：

• your-grid-container 应替换为实际的类或 ID 容纳您产品的容器。
• repeat(4, 1fr) 创建一个具有 4 列等宽的网格

假设您的 HTML 结构如下所示：

<div class="quick-shop-grid">
    <div class="product">Product 1</div>
    <div class="product">Product 2</div>
    <div class="product">Product 3</div>
    <div class="product">Product 4</div>
    <div class="product">Product 5</div>
    <div class="product">Product 6</div>
    <div class="product">Product 7</div>
    <div class="product">Product 8</div>
</div>

你的CSS将是

.quick-shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}