border between each column in CSS grid layout

Question

I am trying to add borders between each columns in a grid layout in CSS. However, inside my wrapper div, the divs that I have don't contain the same content, so when I'm trying to set a border-top and left on my wrapper div and then a border-right and bottom on my inside divs, the borders aren't of the same height. I just want to know that when I'm doing grid-template-columns: 1fr 1fr 1fr; how can I set a border-right for each fraction.

Here's my code:

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

Here's the 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

I had a similar issue that led me into this post. However, I was using grids directly. Here's what I did that may help you or the person visiting this post with similar issue:

I was using the below code to create four grids but it kept creating space between each column:

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

I just used the below property to make the columns be free of extra space:

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

Hope this property helps with the issue.

Answer 2

Perhaps you want align-items: stretch?

This page is a great reference for formatting grids.

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