Is it possible to add spacing in an item without increasing its size?

Question

I'm trying to add space between columns (which are inside a container with "display: flex;"), but for example let's say I have 2 columns columns with 50% width if I add margin to any of them. The only way I thought of "adding" some space between columns so they would not stick together is to create another container just to add margin,bg-color, padding etc.

Example of a grid based on 12 columns, where everything happens normally:

    <!DOCTYPE html>
    <html>
    
    <head>
        <style>
            *,
            *::after,
            *::before {
                margin: 0;
                box-sizing: border-box;
            }
    
            .row {
                display: flex;
                flex-flow: row wrap;
            }
    
            /* based on 12 columns */
            .col-hd-3 {
                width: 25%;
            }
        </style>
    </head>
    
    <body>
        <div class="row">
            <div class="col-hd-3" style="background-color: red;">
                test
            </div>
            <div class="col-hd-3" style="background-color: green;">
                test
            </div>
            <div class="col-hd-3" style="background-color: yellow;">
                test
            </div>
            <div class="col-hd-3" style="background-color: grey;">
                test
            </div>
        </div>
    </body>
    
    </html>

Now, let's say I add margin to any column:

    <! ---->
    <div class = "row">
             <div class = "col-hd-3" style = "background-color: red; margin: 12px;">
                 test
             </ div>
    <! ---->

the last column will go to the next line.

So the only thing that solves it is something like:

    <!---->
    <div class="row">
            <div class="col-hd-3">
                <div style="margin: 12px; padding: 5px; background-color: red;">
                    Test
                </div>
            </div>
    <!---->

Am I sure about the solution, or is this something done wrong?

check this one :https://stackoverflow.com/q/53020698/8620333 it's almost what you need .. the trick to use flex-basis/flex-grow instead of width — Temani Afif, Feb 17 '19 at 22:05
`width: calc(50% - 20px); margin: 0 10px;` (`margin` + `width` => `50%`). The other option is to use more than one wrapper, the outer one having the desired `padding`. causing the contents to size down to available space (`padding` subtracted). — tao, Feb 17 '19 at 22:21
@TemaniAfif hey, thx! This help me, but i want test with others columns width to see if it works correctly — marcos souza, Feb 17 '19 at 22:34

caiovisk · Answer 1 · 2019-02-18T23:53:21.347

So as you are using display: flex you need to set flex-grow: 1; and flex-basis: 0; on your column or simply set flex: 1;. Read: https://www.w3schools.com/cssref/css3_pr_flex.asp

The flex-grow defines the ability for a flex item to grow if necessary, and the flex-basis defines the default size of an element before the remaining space is distributed.

So:

.col-hd-3 {
   max-width: 25%; /* COLUMN WILL NOT BE WIDER THAN 25% */
   margin: 12px;
   flex-basis: 0;
   flex-grow: 1;
}

or you can use the flex shorthand:

.col-hd-3 {
    max-width: 25%; /* COLUMN WILL NOT BE WIDER THAN 25% */
    margin: 12px;
    flex: 1;
}

*,
*::after,
*::before {
    margin: 0;
    box-sizing: border-box;
}

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

/* based on 12 columns */
.col-hd-3 {
    width: 25%;
    margin: 12px;
    flex-basis: 0;
    flex-grow: 1;
}

<div class="row">
      <div class="col-hd-3" style="background-color: red;">
          test
      </div>
      <div class="col-hd-3" style="background-color: green;">
          test
      </div>
      <div class="col-hd-3" style="background-color: yellow;">
          test
      </div>
      <div class="col-hd-3" style="background-color: grey;">
          test
      </div>
  </div>

I tried here, the bad with this approach, is that when there is only one item, for example, a single column that occupies 25% of the space, it will be occupying 100%. So I've changed "width" to "max-width" and it seems to be working fine. — marcos souza, Feb 18 '19 at 01:47
It is not bad, that is the normal behaviour of the `flex-grow`, it will fill the available space in the container, so if you remove 2 or 1 or any columns the `flex-grow: 1` property will set and fill it with how much space is available in the `flex` container. In your case you do not want the column width to be greater than 25%, so you figured out that the `max-width` does the job within `flex-grow`. I have updated the answer. — caiovisk, Feb 18 '19 at 23:52

Is it possible to add spacing in an item without increasing its size?

1 Answers1