CSS 网格布局中每列之间的边框

Question

我正在尝试在 CSS 网格布局中的每列之间添加边框。但是，在我的包装 div 内，我所拥有的 div 不包含相同的内容，因此当我尝试在包装 div 上设置边框顶部和左侧，然后在内部 div 上设置边框右侧和底部时，边界的高度不同。我只想知道当我做 grid-template-columns: 1fr 1fr 1fr; 时如何为每个分数设置右边框。

这是我的代码：

<div class="sort-count-filter">
  
    <div class="product-count">
        <p>{{ collection.products_count }} products</p>
    </div>

    <!-- collections filter by tag -->
    <div class="filter-by">
      {% if collection.all_tags.size > 0 %}
        <p>Filter by</p>
        <ul class="tag-filters">
          {% for tag in collection.all_tags %}
          {% unless tag contains "_"%}
            {% if current_tags contains tag %}
                <li class="tag-filters__item"><p class="filters">{{ tag | link_to_remove_tag: tag }}</p></li>
            {% else %}
              <li class="tag-filters__item"><p class="filters">{{ tag | link_to_add_tag: tag }}</p></li>
            {% endif %}
          {% endunless %}
          {% endfor %}
        </ul>
      {% endif %}
    </div>

<!-- collection sort -->
    <div class="sort-by">
      <span>Sort by</span>
      <span>
        <select id="sort-by">
            {% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
            {% for option in collection.sort_options %}
              <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
                {{ option.name }}
              </option>
            {% endfor %}
          </select>
        </span>
    </div> 

</div>

这是 CSS：

.sort-count-filter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 3%;
    font-family: "Open Sans";
    justify-content: center;
    align-items: center;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
.sort-count-filter > div {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

Answer 1

也许你想要

align-items: stretch

？

此页面是格式化网格的一个很好的参考。

.sort-count-filter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-family: "Open Sans";
    justify-content: center;
    align-items: stretch;
    border-top: 1px solid black;
    border-left: 1px solid black;
}
.sort-count-filter > div {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    padding: 0 1em;
}

<div class="sort-count-filter">
  
    <div class="product-count">
        <p>99 products</p>
    </div>

    <div class="filter-by">
        <p>Filter by</p>
        <ul class="tag-filters">
          <li class="tag-filters__item"><p class="filters">One</p></li>
          <li class="tag-filters__item"><p class="filters">Two</p></li>
          <li class="tag-filters__item"><p class="filters">Three</p></li>
          <li class="tag-filters__item"><p class="filters">Four</p></li>
          <li class="tag-filters__item"><p class="filters">Five</p></li>
          <li class="tag-filters__item"><p class="filters">Six</p></li>
          <li class="tag-filters__item"><p class="filters">Seven</p></li>
        </ul>
    </div>

    <div class="sort-by">
      <p>Sort by
        <select id="sort-by">
              <option>One</option>
              <option>Two</option>
              <option>Three</option>
              <option>Four</option>
          </select>
        </p>
    </div> 

</div>

Answer 2

我遇到了类似的问题，导致我写了这篇文章。然而，我直接使用网格。以下是我所做的，可能会帮助您或访问此帖子并遇到类似问题的人：

我使用下面的代码创建四个网格，但它不断在每列之间创建空间：

.grid-four-cols {
    grid-template-columns: repeat(4, 1fr);
}

我只是使用以下属性来使列没有额外的空间：

.grid-four-cols {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: initial;
}

希望此属性有助于解决这个问题。