Add divider between flex-wrap items except for last column of each row

Question

I am trying to create a list item with specific width, and the items will fill the whole div element. But for each row, I want to have a divider between each item except for the last item of each row. So far this is the result I'm getting.

instead of

Here are my code

HTML:

<div class="greetings__container">
    <h1 class="greetings__title">&ddagger; GREETZ TO &ddagger;</h1>
    <div class="greetings">
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li><span class="divider">|</span>
        <li>Item for the list</li>
    </div>
</div>

CSS:

.greetings__container {
    margin: 0px auto;
    padding: 20px;
    border: 2px solid #0f0;
    border-radius: 0.75rem;
    box-shadow: inset 0px 0px 5px #0f0, 0px 0px 10px #0f0;
    background-color: rgba(0, 255, 0, 0.1);
    width: 800px;
}

.greetings__container h1.greetings__title {
    text-align: center;
    font-size: 16px;
    color: #0f0;
}

.greetings {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.greetings li {
    margin: 0px;
    padding: 0px;
    line-height: 100%;
}

.greetings li:not(:last-child) {
    padding-right: 15px;
    border-right: 1px solid #0f0;
}

I'm trying to achieve that not matter how many items there will be, the divider would only be between each item no matter how many rows there are.

score 0 · Answer 1 · answered Jul 29 '22 at 01:26

Here are some quick fix i did as it seems that youre hardcoding each li. Added class except for the 1st of each row to style.

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
.greetings__container {
    margin: 0px auto;
    padding: 20px;
    border: 2px solid #0f0;
    border-radius: 0.75rem;
    box-shadow: inset 0px 0px 5px #0f0, 0px 0px 10px #0f0;
    background-color: rgba(0, 255, 0, 0.1);
    width: 800px;
}

.greetings__container h1.greetings__title {
    text-align: center;
    font-size: 16px;
    color: #0f0;
}

.greetings {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.greetings li {
    margin: 0px;
    padding: 0px;
    line-height: 100%;
}

.line::before {
  content: "";
  z-index: -1;
  position: absolute;
  left: -8px;
  width: 1px;
  height: 20px;
  background-color: green;
}

<div class="greetings__container">
    <h1 class="greetings__title">&ddagger; GREETZ TO &ddagger;</h1>
    <div class="greetings">
        <li>Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li>Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li>Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li>Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
        <li class="line">Item for the list</li>
    </div>
</div>

score 0 · Answer 2 · answered Jul 29 '22 at 04:10

you can achieve that buy using pseudo elements but you'll have to put some media queries to make this responsive I suggest using grid instead of flex.

.greetings__container {
  margin: 0px auto;
  padding: 20px;
  border: 2px solid #0f0;
  border-radius: 0.75rem;
  box-shadow: inset 0px 0px 5px #0f0, 0px 0px 10px #0f0;
  background-color: rgba(0, 255, 0, 0.1);
  width: 800px;
}

.greetings__container h1.greetings__title {
  text-align: center;
  font-size: 16px;
  color: #0f0;
}

.greetings {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  column-gap: 50px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

li {
  position: relative;
}

li::after {
  content: "|";
  position: absolute;
  left: calc(100% + 25px);
}

li:nth-child(5n)::after {
  content: "";
}

<div class="greetings__container">
    <h1 class="greetings__title">&ddagger; GREETZ TO &ddagger;</h1>
    <div class="greetings">
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
        <li>Item for the list</li>
    </div>
</div>

Add divider between flex-wrap items except for last column of each row

2 Answers2