无法实现特定的 CSS 网格布局

Question

我正在尝试创建购物车页面。这是我的目标：

我考虑过使用 Flexbox，因为这是一维布局，但想对 CSS 网格进行一些练习。我认为 CSS 网格是一个很好的解决方案，因为我可以看到 6 个大小不等的列。我想我很接近，但我的间距很远。这是我目前所拥有的：

.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同码

我想我的问题是 grid-template-columns: repeat(6, auto)。它创建了 6 列，每列仅与其内的内容一样大。只是不知道如何实现准确定位。

感谢您的帮助。

Answer 1

为什么不尝试使用旧方法：想要使用网格？

.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 2

我已经使用 bootstrap 来处理这个问题。

Bootstrap 对各种显示尺寸的响应非常好，请查看下面的代码

<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 3

我知道您在询问 css 网格 的解决方案，但我认为您的第一个想法更好。购物车是一个元素列表，其中一些元素具有或多或少的固定大小和位置，而另一个元素的描述需要根据宽度进行调整。对我来说，这是一个弹性项目列表，flex-flow: row nowrap 在描述中添加了 flex: auto。

此外，不需要 headers 行，因为如果顺序正确，概念很清楚：照片 > 描述 > 价格 x [数量] > 总计 > 操作。

我把你的笔分叉给你看一个例子：https://codepen.io/jesuke/pen/aMYGdv

但是，如果您认为 Headers 是必需的，那么您正在寻找的是具有固定布局的 数据 table 我相信。固定布局将为您提供所需的准确定位。

Answer 4

此解决方案使用网格模板列名称并在需要时分配它们。一些模板设置使用 minmax() 以提供一定的灵活性。当然，您应该调整这些以符合您的规格。

product-details 部分设置为 flex，布局为 column。

还包括 OP 图片中所需布局的 header 部分。这也设置为网格，并将适当的列名称分配给 header 标签。

此外，一些轻微的改进是 product-title 上的轻微缩进（如 OP 提供的图像所示）以及 pre-prending $ 到 product-price值。

命名网格模板的好处是分配变得容易，而且网格单元格值的设置也很容易编辑，例如，无需过多考虑我正在编辑哪个编号列。

.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>

Answer 5

根据我对这个问题的评论，您可以尝试使用 grid-template-columns: repeat(8, 1fr) 创建一个 8 列布局，并使用 grid-column: span 3 作为 product-details 元素 - 请参见下面的演示：

.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>

无法实现特定的 CSS 网格布局

Having trouble achieving specific CSS Grid layout

html

css

grid-layout

css-grid