how can I make a grid using flexbox with a fixed spacing between child divs?

user_16919673 0
Viewed 76

the idea is not to use any framework.

Basically I am using a .row class that will contain my grid and it will be flexbox. Each child will have a class that will say how much width it will occupy (something like the bootstrap grid), so for example:

.col1: {width: 25%};  
.col2: {width: 50%};  
.col3: {width: 75%}; 
.col4: {width: 100%};

if I put 4 divs with the class .col1 they should be in the same line because they would occupy 25% of the container (.row), but if I put one more div it would go down to another line because it exceeded 100% of the container.

|| col1 | col1 | col1 | col1 || //4 divs each div with 25% in the same .row.


|| col1 | col1 | col1 | col1 || //5 divs each div with 25% in the same .row.
|| col1 |                     | 


||        col3        | col1 || //2 divs 1 of 75% other of 25% .row.

The problem is that my grid should always contain a space of 20px between each element, something like the following image:

enter image description here

I don't know how to put a space between each div and still comply with the above rules, if I have 4 divs with class .col1 they must be in the same line (including the space). If I have a div with .col3 and another with .col1 it should be:

enter image description here

how can I do it?

I tried this: (gap between the divs exceeds the percentages of the div's width,this is the reason why the divs in this example are not in the same line even though there are 4 divs that should occupy 100% of the .row since each one would have 25% of the width. )

html,body{
 padding:0px;
 margin:0px;
 box-sizing: border-box
}

.row{
  display:flex;
  flex-wrap:wrap;
  border:1px solid red;
  width:100%;
  gap: 20px;
  
}

.row div{
  border:1px solid blue;
  background:yellow;
  font-size:24px;
  text-align:center;
  height:100px;
 }
 
.col1{
 width:25%;
}
.col2{
 width:50%;
}
.col3{
 width:75%;
}
.col4{
 width:100%;
}
<div class="row">
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
</div>

how can fix it? or is there any better way to achieve this?

NOTE: I need no spaces at the beginning of the first div of the .row, nor at the end of the last div of the .row

css
4 Answers

You might use calc():

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box
}

section {
  width: 100%;
  overflow: hidden;
  border: 1px solid red
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-left: -10px;
}

.row div {
  border: 1px solid blue;
  background: yellow;
  font-size: 24px;
  text-align: center;
  height: 50px;
  margin: 0 auto;
}

.col1 {
  min-width: calc(25% - 20px);
}

.col2 {
  min-width: calc(50% - 20px);
}

.col3 {
  min-width: calc(75% - 20px);
}

.col4 {
  min-width: calc(100% - 20px);
}
<section>
  <div class="row">
    <div class="col1">col1</div>
    <div class="col1">col1</div>
    <div class="col1">col1</div>
    <div class="col1">col1</div>

    <div class="col1">col1</div>
    <div class="col2">col2</div>
    <div class="col1">col1</div>

    <div class="col1">col1</div>
    <div class="col3">col3</div>

    <div class="col4">col4</div>

  </div>
</section>

user_57243030

Add some CSS variables to make the calculation you want:

body {
  padding: 0px;
}

.row {
  --g:20px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
  gap: var(--g);
}

.col1 {width:calc((100% - 3*var(--g))*1/4 + 0*var(--g))}
.col2 {width:calc((100% - 3*var(--g))*2/4 + 1*var(--g))}
.col3 {width:calc((100% - 3*var(--g))*3/4 + 2*var(--g))}
.col4 {width:calc((100% - 3*var(--g))*4/4 + 3*var(--g))}


.row div {
  border: 1px solid blue;
  box-sizing: border-box;
  background: yellow;
  font-size: 24px;
  text-align: center;
  height: 100px;
}
<div class="row">
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col1">col1</div>
  <div class="col2">col2</div>
  <div class="col1">col1</div>
  <div class="col3">col3</div>
  <div class="col1">col1</div>
  <div class="col2">col2</div>
  <div class="col2">col2</div>
  <div class="col4">col4</div>
</div>

user_86203330

I think you should add one more child tag to contain the content of a col.

        html,
        body {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid red;
            width: 100%;
            /* gap: 20px; */
        }

        .row div {
            /* border: 1px solid blue; */
            font-size: 24px;
            text-align: center;
            height: 100px;
        }

        .col1 {
            width: 25%;
        }

        .col2 {
            width: 50%;
        }

        .col3 {
            width: 75%;
        }

        .col4 {
            width: 100%;
        }

        .col1>* {
            background: yellow;
            margin: 0 20px;
        }

        .col3>* {
            background: yellow;
            margin: 0 20px;
        }
<body>
    <div class="row">
        <div class="col1">
            <div>col1</div>
        </div>
        <div class="col1">
            <div>col1</div>
        </div>
        <div class="col1">
            <div>col1</div>
        </div>
        <div class="col1">
            <div>col1</div>
        </div>
        <div class="col3">
            <div>col3</div>
        </div>
        <div class="col1">
            <div>col1</div>
        </div>
    </div>
</body>

user_110483960

the pixels that you are using to separate each div are part of the % of the all that div, as you say, exceeds the percentages of the div's width. I mean, if that space between cols is mandatory, you need to do 25% - 20px, and so on for each col

user_163929090
Related