divide response width into 4 columns in css

Question

I use responsive interface and want to split the code below into 4 columns width: 25%; but I only achieved 3 columns. How to fix it into 4 columns and still use margin: 5px; ?

Demo: https://jsfiddle.net/4je2y9nb/

    .list {
  width:100%;
  display: block;
}
.item {
    position: relative;
    width: 25%;
    height: 148px;
    font-size: 12px;
    overflow: hidden;
    background-color: red;
    float: left;
    margin: 5px;
}

<div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    </div>

Boxes with 25% of the window width can't be displayed in 4 columns, if there is space between them. Just simple maths. — csabinho, Sep 28 '19 at 19:12

score 2 · Accepted Answer · answered Sep 28 '19 at 19:13

want to split the code below into 4 columns width: 25%; but I only achieved 3 columns

When specifying the width of the elements, you must consider the given margin property

In your situation: width: calc(100% / 4 - 10px);

Result

.list {
  width: 100%;
  display: block;
}

.item {
  position: relative;
  width: calc(100% / 4 - 10px);
  height: 148px;
  font-size: 12px;
  overflow: hidden;
  background-color: red;
  float: left;
  margin: 5px;
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

And same code on JSFiddle

Thank you. It works as I want. I forgot to use calc – mota2019 Sep 28 '19 at 19:17 — mota2019, Sep 28 '19 at 19:17

divide response width into 4 columns in css

1 Answers1

Result