How to set three items with same width 33.3% in row using css ? Flex or Grid ( it does not matter )-CodePudding

Here is all code example ->

https://codepen.io/mihailovic-aleksandar/pen/eYVREwE

What do I need? First I have a problem with margin, negative margin. I need the to item be full width 33.3%

To solve the negative margins.

I want each item to be exactly 33.3% and to be full length. It's 32% for me at the moment, and if I set it to 33.3%, it's a shortcut to a new line.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32%;
  height: 75px;
  background: #f4f4f4;
  margin: 3px;
  border-radius: 10px;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div > 7</div>
</div>

CodePudding user response：

if you want to include the margin (though you should include a gap over a margin), you need to use calc(33.33% - 6px) as width

.container {
    display: flex;
    flex-wrap :wrap;
    height: 165px;
    width: 100%;
}

.item {
  background: red;
   display: flex;
  align-items: center;
  justify-content: center;
  width: calc(33.33% - 6px);
  height: 75px;
  background: #f4f4f4;
  margin: 3px;
  border-radius: 10px;
}

<div >
  <div >1</div>
   <div >2</div>
   <div >3</div>
   <div >4</div>
   <div >5</div>
   <div >6</div>
   <div > 7</div>
</div>

CodePudding user response：

Even a measly 3px of margin will make your flex items wrap to a new line when using width: 33%. You can use width: calc(100%/3) to make them exactly 33.33% but you will have to remove the static left and right margin.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3);
  margin: auto auto .5em auto;
  height: 75px;
  background: #f4f4f4;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
</div>

If you want to have spacing you can use width: calc(100%/3.1) on item with margin: auto so they're centered. The .1 accounts for some spacing. Another option would be to use width: calc(100%/3 - 6px); to account for margin: 3px;.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3 - 6px); /* -6px accounts for margin: 3px; i.e., top   bottom at 3px = 6px */
  margin: 3px;
  height: 75px;
  background: #f4f4f4;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
</div>

CodePudding user response：

You can use a container for your items and give them width:33.33% and set margin to your items.

Here is an example based on your pen :

.container {
  display: flex;
  flex-wrap :wrap;
  height: 165px;
  width: 100%;
}
.item-container {
  display: flex;
  width: 33.33%;
  height: 75px;
}
.item{  
  width:100%;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 10px;
}

<div >
  <div >
    <div >1</div>
  </div>
  <div >
    <div >2</div>
  </div>
  <div >
    <div >3</div>
  </div>
  <div >
    <div >4</div>
  </div>
  <div >
    <div >5</div>
  </div>
  <div >
    <div >6</div>
  </div>
  <div >
    <div >7</div>
  </div>
</div>