Having trouble achieving specific CSS Grid layout

Question

I am trying to create a shopping cart page. This is my goal:

I though about using Flexbox since this is one dimensional layout, but wanted to get some practice with CSS Grid. I think CSS Grid is a good solution because I can see 6 unequal sized columns. I think I'm close, but my spacing is way off. This is what I have so far:

.shopping-cart .product-row {
 
  display: grid;
  grid-template-columns: repeat(6, auto);
  border-bottom: 1px solid #eee;
}


.shopping-cart .product-row .product-image  img {
    width: 100px;
}

.shopping-cart .product-row .product-details   {
  display: inline-block;
  grid-column-start: 2;
  grid-column-end: 3;
}

.shopping-cart .product-row .product-details .product-description  {
    display: inline-block;
    margin: 5px 20px 0px 0;
    width: 50%; 
    line-height: 1.4em;
}

.shopping-cart .product-row .product-quantity input {
    width: 40px;
}

<div class="shopping-cart">

    <div class="product-row">

        <div class="product-image">
                <img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
        </div>

        <div class="product-details">
            <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="product-price">12.99</div>
        <div class="product-quantity">
            <input type="number" value="2" min="1" />
        </div>

        <div clas="product-removal">
            <button class="remove-product">
                Remove
            </button>
        </div>

        <div class="product-total-price">
            25.98
        </div>
    </div>




</div>

Here's a code pen of the same code

I think my problem is with grid-template-columns: repeat(6, auto). It's creating 6 columns and each column is only as big as the content inside of it. I'm just not sure how to achieve for accurate positioning.

Thank you for any help.

Answer 1

As per my comments to this question, you can try creating an 8-column layout using grid-template-columns: repeat(8, 1fr) and use grid-column: span 3 for product-details element - see demo below:

.shopping-cart .product-row {
 
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* CHANGED */
  border-bottom: 1px solid #eee;
}


.shopping-cart .product-row .product-image  img {
    width: 100px;
}

.shopping-cart .product-row .product-details   {
  display: inline-block;
  grid-column: span 3; /* CHANGED */
}

.shopping-cart .product-row .product-details .product-description  {
    display: inline-block;
    margin: 5px 20px 0px 0;
    width: 50%; 
    line-height: 1.4em;
}

.shopping-cart .product-row .product-quantity input {
    width: 40px;
}

<div class="shopping-cart">

    <div class="product-row">

        <div class="product-image">
                <img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
        </div>

        <div class="product-details">
            <div class="product-title">Coffee</div>
            <div class="product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  </div>
        </div>
        <div class="product-price">12.99</div>
        <div class="product-quantity">
            <input type="number" value="2" min="1" />
        </div>

        <div clas="product-removal">
            <button class="remove-product">
                Remove
            </button>
        </div>

        <div class="product-total-price">
            25.98
        </div>
    </div>




</div>