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

Question

我正在尝试在CSS中的网格布局中添加每个列之间的边界。但是，在我的包装师内部，我没有包含相同内容的div，因此当我试图设置边框并留在包装纸上，然后在我的内部divs上放置边框权利和底部，边界的高度不是相同的。我只想知道，当我做网格 - 板柱时：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;
}

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