Adjust 3 box in a row using flexbox

Question

I want to place 3 Box in a row, another 3 in second row. This is working fine if I do not add margin: 2px; and width: calc(33%-4px);. But if I add margin: 2px; and adjust in width as width: calc(33% - 4px); then all are coming in same row. Please let me know what I am doing wrong here with width calc method.

Incorrect Code -

.container { display: flex; flex-wrap: wrap; }
.box { 
  flex-grow: 1; 
  width: calc(33%-4px); 
  height: 100px; 
  background: green;
  margin: 2px;
 }

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

Working Code -

.container { display: flex; flex-wrap: wrap; }
.box { 
  flex-grow: 1; 
  width: 33%; 
  height: 100px; 
  background: green;
 }

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

Isn't that a duplicate of https://stackoverflow.com/q/36415226/383904 ? — Roko C. Buljan, Jul 09 '20 at 19:14
Does this answer your question? [How can display table-row behave like colspan=3](https://stackoverflow.com/questions/36415226/how-can-display-table-row-behave-like-colspan-3) — Umutambyi Gad, Jul 09 '20 at 19:15
another idea without the need of calc() and using flex-basis: https://stackoverflow.com/a/53020778/8620333 — Temani Afif, Jul 09 '20 at 19:21

score 1 · Accepted Answer · answered Jul 09 '20 at 19:15

1

The margin should match the calc(100% - <this value here>px)
Also notice that spaces are needed in order for calc(<value>(space)<operator>(space)<value>) to work!

.container { display: flex; flex-wrap: wrap; }
.box { 
  flex-grow: 1; 
  width: calc(33% - 2px); 
  margin: 2px;
  height: 100px; 
  background: green;
 }

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

answered Jul 09 '20 at 19:15

Roko C. Buljan

196,159
39
305
313

margin apply to both sides so we need 2*margin inside the calc – Temani Afif Jul 09 '20 at 19:19
@TemaniAfif: Exactly that is my question, why 2px is working but not 4px as I am reducing margin-left: 2 and margin-right: 2px from width – Nesh Jul 09 '20 at 19:21
@Nesh the only issue of your code is the spaces inside calc() [like explained in the duplicate] – Temani Afif Jul 09 '20 at 19:22
@TemaniAfif ohhhhh man ......thx a lot ..really-2 helpful :) – Nesh Jul 09 '20 at 19:23

score 1 · Answer 2 · answered Jul 09 '20 at 19:16

1

Change

width: calc(30%-4px)

to

width: calc(30% - 4px);

answered Jul 09 '20 at 19:16

Avyn E.

46
5

Adjust 3 box in a row using flexbox

2 Answers2