0

I am having issues with flexbox. When I use the property gap it is making the columns too wide? I am trying to create a simple 3 column row.

I thought that the gap value would not affect the width set? Ie. flex: 0 1 33.33% and gap 2rem would then adjust the width automatically?

Would anyone have any solutions for this issue?

here is the example - https://codepen.io/CodePlanB1234/pen/WNMypqR

  <div class="row projects--wrapper">
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
        <div class="card-project--card col-4-12">
          <div class="card-project--image"><img src="/images/bgpic1.jpg" alt="text"></div>

        </div>
            </div>
CodePlanB1234
  • 23
  • 3
  • You can try this `.col-4-12 {width: calc(33.33% - 2rem)}`. It means reduce `2rem gap` from defined width. – Raeesh Alam Jun 03 '22 at 03:40
  • Thanks. I thought when using flexbox it would adjust the width set to incorporate and allow for the gap. Is that not true. Ie. I could set the column to 33.33% or 'flex: 0 1 33.33%' and the gap value would be included within that? – CodePlanB1234 Jun 03 '22 at 03:47

1 Answers1

1

gap it take space so in my understanding is to use calc function to reset the column wide by using calc function. In these example the flex that have 4 column for each row which is mean it will have 3 gap column in the same row. As for gap you should set as varible so you can change how much the gap it will be given in gap variable.

Here the formula

the formula for width flex item with gap

W = 100%/NC - G/NC*NC-1

NC = number of column on the same row

G = gap range

width = (100% of width row / NC) - (G / NC * NC-1)

.flex {
  display: flex;
  flex-wrap: wrap;
}

.gap {
  --gap: 1em;
  gap: var(--gap);
}

.item-four-col {
  width: calc(100% / 4 - calc(var(--gap)/4*3));
  background-color: red;
}
<div class="flex gap">
  <div class="item-four-col">1</div>
  <div class="item-four-col">2</div>
  <div class="item-four-col">3</div>
  <div class="item-four-col">4</div>
  <div class="item-four-col">5</div>
  <div class="item-four-col">6</div>
</div>
Jafar Pager Jaya
  • 45
  • 7