时间戳

首页 > 解决方案 > 无法实现特定的 CSS 网格布局

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

问题描述

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

购物车图片

我虽然关于使用 Flexbox，因为这是一维布局，但想通过 CSS Grid 进行一些练习。我认为 CSS Grid 是一个很好的解决方案，因为我可以看到 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 列，每列仅与其中的内容一样大。我只是不确定如何实现准确定位。

感谢您的任何帮助。

标签： htmlcsscss-gridgrid-layout

解决方案

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

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

推荐阅读