难以实现特定的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>

​

相同代码的这是一支密码笔

我想我的问题在于grid-template-columns: repeat(6, auto)。它创建了6个列，每个列都只有其中的内容那么大。我只是不知道如何实现准确的定位。

谢谢你的帮助。

Answer 1

根据我对这个问题的评论，您可以尝试使用grid-template-columns: repeat(8, 1fr)创建一个8列布局，并使用grid-column: span 3 for 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>

​

Answer 2

为什么不尝试使用旧的方法:要使用网格吗？

​

.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

我用引导程序来处理这个问题。

引导是跨不同显示大小的非常响应的，请看下面的代码

​

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

​