CSS Flex item cards not working as intended-CodePudding

I set the width the 33.3% per each item but its still just 2 boxes per row. Anyway to fix? (I want 3)

body, html {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;

}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto repeat(11, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "t t t t t t t t t t t t"
    "l c c c c c c c c c c c"
    "f f f f f f f f f f f f";
}

.top-menu {
  grid-area: t;
  background-color: red;
}

.left-menu {
  grid-area: l;
  background-color: blue;
}

.content {
  grid-area: c;
  background-color: green;
  displaY: flex;
  flex-wrap: wrap;
  
}

.content .item {
  background-color: black;
  width: 33.3%;
  margin: 25px;
}

.footer {
  grid-area: f;
  background-color: grey;
}

  <div >
    <div >
     abc
    </div>
    
    <div >
     abc
    </div>
    
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    
    </div>
    
    <div >
     abc
    </div>

  </div>

I want to make my content side contain 3 boxes per each row. For example where [] is the black box (that is the .item div)

.content div:
 [] [] []
 [] [] []
 [] [] []
 [] [] []
 [] [] []

I think the issue is the margin, is there any way to still get the margin but not impact the width"?

CodePudding user response：

You have a margin of 25 pixels on the left and right of the item. So you need to subtract 25px * 2 = 50px item width.

    .content .item {
        background-color: black;
        width: calc(33.3% - 50px);
        margin: 25px;
    }

CodePudding user response：

You need to subtract the margin from the width:

.content .item {
    background-color: black;
    width: calc(33.3% - 50px);
    margin: 25px;
}