Equal Flexbox Columns

scss

Sometimes, you may want to have equal-width columns, for example, in an index of articles.

In my case, I want to achieve this by using the Flexbox.

I have implemented a fancy solution that works universally and looks like this:

<h2>Neat Products List</h2>
<div class="products-list">
  <article class="products-result"></article>
  <article class="products-result"></article>
  <article class="products-result"></article>
  <article class="products-result"></article>
  <article class="products-result"></article>
  etcetera...
</div>

And with the following SCSS:

.products-list {
  display: flex;
  flex-wrap: wrap;
  --gap: 3rem;
  gap: var(--gap);
  background-color: #eee8aa;
}
.products-result {
  background-color: lime;
  flex: 0 0 auto;
  --columns: 1;
  width: calc(100% / var(--columns) - var(--gap) / var(--columns) * (var(--columns) - 1));
  @include media-breakpoint-up(md) {
    --columns: 2;
  }
  @include media-breakpoint-up(lg) {
    --columns: 3;
  }
  @include media-breakpoint-up(xxl) {
    --columns: 4;
  }
  @include media-breakpoint-up(xxxl) {
    --columns: 5;
    // and for each breakpoint you can change this --columns property.
  }
}