How to add column borders in CSS Grid?

Question

How do I add border-left or border-right in between each column? I tried to add a border left or right but it doesn't seem to help in this case, as the number of the column depends on the size of the screen, the bigger the screen, the more column it has.

Here is the working jsfiddle.

Below is the output that I get in 3 different sizes of the screen:

Not sure how can I achieve this, (can be different number of column but there must be a line in between):

UPDATED

After changing

grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));

to

grid-template-columns: repeat(4, 25fr);

grid-template-rows: repeat(4, 25fr);

.flex-container {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  width:85%;
}

.flex-item-blue {
  background-color: light-blue;
  width:100%;
  /*border:1px solid orange;*/
}

.flex-item-grey {
  background-color: grey;
  border-left:1px solid black;
}
.item-name{
  text-align:left;
  display:inline-block;
  /*border:1px solid green;*/
  width:70%;
}

.item-amt{
  text-align:center;
  display:inline-block;
  width:20%;
  /*border:1px solid red;*/
}

<div class="flex-container">
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
</div>

Some of the answers here may be helpful: https://stackoverflow.com/q/47882924/3597276 — Michael Benjamin, Nov 03 '21 at 01:33

score 0 · Answer 1 · answered Nov 03 '21 at 05:34

One approach can be with columns. This is an underrated property.

.flex-container{
  padding: 1em;
  column-width: 14rem;
  column-rule: 2px solid #f0f0f0;
  column-gap: 3em;
}

.flex-item-blue, .flex-item-grey{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2em 0.5em;
}

<div class="flex-container">
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-grey">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
  <div class="flex-item-blue">
    <div class="item-name">
    Strawberry
    </div>
    <div class="item-amt">
    1
    </div>
  </div>
</div>

Also, instead of having two different classes just for background color, it seems that :nth-child() selector will be more suitable for this.

How to add column borders in CSS Grid?

1 Answers1