Is there a way I can remove the margin created between flex elements?-CodePudding

I'm trying to modify/remove this violet margin.

Also, is there a way I can specify how many items to I want in a certain row using css? For example, when 1500px, instead of having 3 items and then 1 item, I want 3 items and then another 3 items.

Thank you.

Image: https://imgur.com/a/3RG4oMb

* {
  padding: 0;
  margin: 0;
  font-family: Georgia;
}

.row {
  width: 95%;
  height: auto;
  display: flex;
  margin: 0 auto;
  flex-flow: wrap;
  justify-content: space-around;
}

.items {
  width: 95%;
  margin: 0 auto;
}

.item img {
  vertical-align: top;
  width: 290px;
  height: 400px;
  margin: 2px auto 14px auto;
  box-shadow: 0px 0px 12px rgba(120, 17, 25, .7);
  display: block;
  opacity: 0.95;
}

.item {
  box-shadow: 0px 0px 8px #000;
  margin: 0px auto 30px auto;
  padding: 15px 0;
  width: 330px;
}

@media screen and (max-width:800px) {
  .search form {
    width: 95%;
  }
  .search input {
    width: 100%;
  }
  .search select {
    width: 100%;
    margin-top: 5px;
  }
}

<html>
<body>
  <main>
    <div >
      <div >
        <div >
          <img src="img/1.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
        <div >
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
        <div >
          <img src="img/3.png" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
        <div >
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="img/1.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
        <div >
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
        <div >
          <img src="img/1.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
        <div >
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>$101</h3>
          <div >
            <button >Comprar</button>
            <button >Vista</button>
          </div>
        </div>
      </div>
    </div>
  </main>

(I removed unnecesary code)

CodePudding user response：

The purple part isn't margin, it's just unused space between items due to your justify-content. If you want to remove space between items, just change the property to justify-content:center.

.row{
    border: 1px solid black;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.item{
  width:33.33%; 
}
.a{
    background-color:blue;
}
.b{
    background-color:red;
}
.c{
    background-color:green;
}
.d{
    background-color:yellow;
}
.e{
    background-color:purple;
}
.f{
    background-color:orange;
}

<div >
    <div >a</div>
    <div >b</div>
    <div >c</div> 
    <div >d</div> 
    <div >e</div> 
    <div >f</div> 
</div>

You can also chose how many items you have by row you can add a new row or set width to your items

CodePudding user response：

You can archive this with media-queries. I wrote a skeleton for you which you can use. Hope it helps!?

.w {
  display: flex;
  flex-wrap: wrap;
  gap:2px;
  justify-content: center;
}

.w > div {
  margin-bottom:2px;
  background: gray;
  width: 24%;
}

@media only screen and (max-width: 1500px) {
  .w {
    background-color: lightblue;
  }
  .w > div {
    margin-bottom:2px;
    background: gray;
    width: 33%;
  }  
}

@media only screen and (max-width: 1100px) {
  .w {
    background-color: lightgreen;
  }
  .w > div {
    margin-bottom:2px;
    background: gray;
    width: 49%;
  }  
}

<div >
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  
  <div>3</div>
  <div>3</div>
  <div>3</div>
  <div>3</div>
  
</div>