Style spacing between repeated elements in CSS using flex gap

Article autor
September 9, 2025
Style spacing between repeated elements in CSS using flex gap
Elixir Newsletter
Join Elixir newsletter

Subscribe to receive Elixir news to your inbox every two weeks.

Oops! Something went wrong while submitting the form.
Elixir Newsletter
Expand your skills

Download free e-books, watch expert tech talks, and explore open-source projects. Everything you need to grow as a developer - completely free.

Table of contents

It's a pretty common scenario - you have to place a few elements in equal distances. E.g. unordered list items.

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</div>

The first solution that comes to mind probably is to use margins. Unfortunately - the last element must be styled separately in this case.

.item {
  width: 100px;
  height: 50px;

  margin-bottom: 40px;
}

.item:last-of-type {
  margin-bottom: 0;
}

Another idea is to use the basic flex property „space-between” and set a fixed height. There is simple math behind that. Every element has 50px height and between every two of them, we want to have 40px of spacing. 50 * 4 + 40 * 3 = 320.

.list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 320px;
}

.item {
  width: 100px;
  height: 50px;
}

The main problem with this solution is the lack of flexibility. By adding a new element to the list - we have to calculate height by hand. Not very cheerful though. (But maybe in your case height of the conatiner is more important for the layout than the specific spacing between elements - then this will be ideal for you).

There is also a third nice option, that I learn and started to use. Flex has property „gap” which is not reserved just to grid as I thought before. It’s a perfect use case for it.

.list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  row-gap: 40px;
}

.item {
  width: 100px;
  height: 50px;
}

Related posts

Dive deeper into this topic with these related posts

No items found.

You might also like

Discover more content from this category

How to change column to nullable with modify in Ecto migration

Sooner or later you'll have to change the null constraint in one of your DB relations. How to do it easily in Ecto?

How to Lazy-Load external scripts for better page speed?

Nowadays, with an ever-growing number of web services, we tend to overload Web apps with external resources. As a result, it decreases page load speed and affects SEO score. There is a pretty easy solution for that.

How to override Kernel macros

The macro mechanism in Elixir is not only an interesting metaprogramming feature - in fact, it is at the language's very core. And the more awesome fact is that, using macros, you can override the algorithm of defining functions itself!