Having trouble achieving specific CSS Grid layout - html

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>

Answer 2

Why not try to use the old methods:
Want to use the grid ?
.row {
display: block;
}
img, input {
max-width: 100%;
}
.img {
width: 64px;
}
.amount {
width: 56px;
}
.details {
width: calc(100% - 64px * 5);
}
.col {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
<div class="shopping-cart">
<div class="row">
<div class="col img"><img src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg"/></div>
<div class="col 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="col">12.99</div>
<div class="col amount"><input type="number" value="2" min="1" /></div>
<div class="col"><button class="remove-product"> Remove </button></div>
<div class="col">25.98</div>
</div>
</div>

Answer 3

I have used bootstrap to handle the issue.
Bootstrap is very response across various display sizes, take a look over the code below
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-2">
<img style="width: 100%;" src="https://www.drivencoffee.com/wp-content/uploads/2016/03/Scandinavian-Blend-coffee.jpg" />
</div>
<div class="col-xs-2">
<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="col-xs-2">12.99</div>
<div class="col-xs-2">
<input type="number" value="2" min="1" />
</div>
<div class="col-xs-2">
<button class="remove-product">
Remove
</button>
</div>
<div class="col-xs-2">
25.98
</div>
</div>

Answer 4

I know you are asking about a solution for css grid, but I think your first idea was better. A shopping cart is a LIST of elements from which some have a more or less fixed size and position and another, the description, needs to adapt depending on the width. That for me is a list of flex items with flex-flow: row nowrap adding a flex: auto to the description.
Also, there is no need for a headers row, as concepts are clear if you order them properly: Photo > description > Price x [Quantity] > Total > Actions.
I forked your pen to show you an example: https://codepen.io/jesuke/pen/aMYGdv
However if you think Headers are required, then what you are looking for is a data table with fixed layout I believe. The fixed Layout will give you that accurate positioning you are looking for.

Answer 5

This solution uses grid template column names and assigning them where required. Some of the template settings use minmax() to allow for some flexibility. Of course, you should adjust these to fit your specifications.
The product-details section is set to flex with a column layout.
Included as well is the header portion from OP's image of the desired layout. This is set as a grid as well and the appropriate column names are assigned to the header labels.
Furthermore, some slight enchancements, are a slight indent on product-title (as shown in the supplied image from OP) and also pre-prending a $ to the product-price value.
Benefits to named grid templates is that assignment is made easy as well as setting the grid cell values are easily edited without much thought to which numbered column am I editing, for example.
.shopping-cart,
.product-row > div {
display: flex;
justify-content: center;
}
.shopping-cart {
flex-direction: column;
}
.shopping-cart__header,
.shopping-cart .product-row {
display: grid;
grid-template-columns: [product-image] 6rem [product-details] minmax(11rem, 24rem) [product-price] 5rem [product-quantity] 5rem [product-removal] 6rem [product-total-price] 5rem;
grid-column-gap: 0.5rem;
grid-template-rows: 1fr;
border-bottom: 1px solid #eee;
align-items: center;
}
[class*="shopping-cart__header__label"] {
text-align: center;
}
.shopping-cart__header__label-price {
grid-column-start: product-price;
}
.shopping-cart__header__label-quantity {
grid-column-start: product-quantity;
}
.shopping-cart__header__label-total {
grid-column-start: product-total-price;
}
.shopping-cart .product-row .product-image img {
width: 100%;
}
.shopping-cart .product-row .product-image {
grid-column-start: product-image;
}
.shopping-cart .product-row .product-details {
grid-column-start: product-details;
display: flex;
flex-direction: column;
padding: 0.625rem;
}
.shopping-cart .product-row .product-details .product-title {
padding-left: 0.635rem;
}
.shopping-cart .product-row .product-price {
grid-column-start: product-price;
}
.shopping-cart .product-row .product-quantity {
grid-column-start: product-quantity;
}
.shopping-cart .product-row .product-quantity input {
width: 2.5rem;
}
.shopping-cart .product-row .product-removal {
grid-column-start: product-removal;
}
.shopping-cart .product-row .product-total-price {
grid-column-start: product-total-price;
}
.shopping-cart .product-row .product-total-price:before {
content: '$';
}
<div class="shopping-cart">
<header class="shopping-cart__header">
<span class="shopping-cart__header__label-price">Price</span>
<span class="shopping-cart__header__label-quantity">Quantity</span>
<span class="shopping-cart__header__label-total">Total</span>
</header>
<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>