'HTML / CSS - Spacing Error on Product Grid

I am working on a Flask project, but that is not too important. When I send over the result data with my rendered template I use the data and put it into a div with each product being contained in an tag.

HTML Code

        <div class="products-grid">
            {% for product in products %}
                <a class="product" href="">
                    <p class="product-title line">{{ product[4] }}</p>
                    <p class="product-desc line">Description: {{ product[5] }}</p>
                    <p class="product-price line">Price: {{ product[6] }}</p>
                </a>
            {% endfor %}
        </div>

However, with my current CSS my positioning is off and I have no idea why, I have it so that there is 50px margins on the outer product-grid container for default but then the spacing on the side of the rightmost product is different than that of the lefmost.

CSS Code

.products-grid {
  padding: 0px;
  margin-left: 50px;
  margin-right: 50px;
}

.product {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 300px;
  background: #ce8888;
  margin-bottom: 50px;
  text-align: center;
  margin-inline: 3%;
  padding: 5%;
}

.line {
  padding: 0px;
  margin-top: 0px;
}

Result of code: enter image description here

htmlcss


Solution 1:[1]

use display:flex for flexible items be the same length you can read here , and if you want keep 3 box per row carefully to set padding at .product

.products-grid {
  padding: 0px;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.product {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 300px;
  background: #ce8888;
  margin-bottom: 50px;
  text-align: center;
  margin-inline: 3%;
  /*padding: 5%;*/
}

.line {
  padding: 0px;
  margin-top: 0px;
}
<body>
<div class="products-grid">
                <a class="product" href="">
                    <p class="product-title line">Product</p>
                    <p class="product-desc line">Description: </p>
                    <p class="product-price line">Price: </p>
                </a>
                
                  <a class="product" href="">
                    <p class="product-title line">Product</p>
                    <p class="product-desc line">Description: </p>
                    <p class="product-price line">Price: </p>
                </a>
                
                  <a class="product" href="">
                    <p class="product-title line">Product</p>
                    <p class="product-desc line">Description: </p>
                    <p class="product-price line">Price: </p>
                </a>
                
                  <a class="product" href="">
                    <p class="product-title line">Product</p>
                    <p class="product-desc line">Description: </p>
                    <p class="product-price line">Price: </p>
                </a>
                
                  <a class="product" href="">
                    <p class="product-title line">Product</p>
                    <p class="product-desc line">Description: </p>
                    <p class="product-price line">Price: </p>
                </a>
                
                  <a class="product" href="">
                    <p class="product-title line">Product</p>
                    <p class="product-desc line">Description: </p>
                    <p class="product-price line">Price: </p>
                </a>
        </div>
   </body>

Solution 2:[2]

Solution without using flex. Add text-align: center to .products-grid css class.

.products-grid {
  padding: 0px;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}

.product {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 300px;
  background: #ce8888;
  margin-bottom: 50px;
  text-align: center;
  margin-inline: 3%;
  padding: 5%;
}

.line {
  padding: 0px;
  margin-top: 0px;
}
<div class="products-grid">
  <a class="product" href="">
    <p class="product-title line">Product</p>
    <p class="product-desc line">Description</p>
    <p class="product-price line">Price</p>
  </a>

  <a class="product" href="">
    <p class="product-title line">Product</p>
    <p class="product-desc line">Description</p>
    <p class="product-price line">Price</p>
  </a>

  <a class="product" href="">
    <p class="product-title line">Product</p>
    <p class="product-desc line">Description</p>
    <p class="product-price line">Price</p>
  </a>

  <a class="product" href="">
    <p class="product-title line">Product</p>
    <p class="product-desc line">Description</p>
    <p class="product-price line">Price</p>
  </a>

  <a class="product" href="">
    <p class="product-title line">Product</p>
    <p class="product-desc line">Description</p>
    <p class="product-price line">Price</p>
  </a>

  <a class="product" href="">
    <p class="product-title line">Product</p>
    <p class="product-desc line">Description</p>
    <p class="product-price line">Price</p>
  </a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 PR7

Related Questions