Html 难以实现特定的CSS网格布局

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

我考虑过使用Flexbox，因为这是一种一维布局，但我想练习一下CSS网格。我认为CSS网格是一个很好的解决方案，因为我可以看到6个大小不等的列。我想我很接近了，但我的间隔太远了。这就是我到目前为止所做的：

.shopping cart.product行{
显示：网格；
网格模板列：重复（6，自动）；
边框底部：1px实心#eee；
}
.购物车.产品行.产品图像img{
宽度：100px；
}
.购物车.产品行.产品详细信息{
显示：内联块；
网格列开始：2；
网格柱端：3；
}
.购物车.产品行.产品详细信息.产品说明{
显示：内联块；
保证金：5px20px0px0；
宽度：50%；
线高：1.4em；
}
.购物车.产品行.产品数量输入{
宽度：40px；
}

咖啡
知识是一种美德，是一种美德，是一种美德，是一种美德。最小值
12.99
去除
25.98

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

.row{
显示：块；
}
img，输入{
最大宽度：100%；
}
.img{
宽度：64px；
}
.金额{
宽度：56px；
}
.详情{
宽度：计算（100%-64px*5）；
}
上校{
显示：内联块；
垂直对齐：中间对齐；
边框：1px纯红；
}

咖啡
知识是一种美德，是一种美德，是一种美德，是一种美德。最小值
12.99
去除
25.98

我已使用引导处理该问题

引导是一种非常有效的方法跨越各种显示尺寸，请查看下面的代码

咖啡
知识是一种美德，是一种美德，是一种美德，是一种美德。最小值
12.99
去除
25.98

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

flex-flow:row nowrap

在描述中添加了

flex:auto

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

我用叉子叉你的笔给你看一个例子：

---

然而，如果您认为需要标题，那么您需要的是一个具有固定布局的数据表。固定布局将为您提供所需的精确定位。

此解决方案使用网格模板列名，并在需要时指定它们。一些模板设置使用

minmax（）。当然，您应该调整这些以符合您的规格

产品详细信息
部分设置为
flex
，带有
列
布局

还包括OP所需布局图像的标题部分。这也被设置为网格，并将相应的列名指定给标题标签

此外，一些轻微的改进是在
产品标题
（如OP提供的图片所示）上略微缩进，并且还预先将
$
添加到
产品价格
值

命名网格模板的好处是，可以轻松地进行指定，也可以轻松编辑网格单元值，而无需考虑我要编辑的编号列


。购物车，
.产品行>部门{
显示器：flex；
证明内容：中心；
}
.购物车{
弯曲方向：立柱；
}
.购物车标题，
.购物车.产品行{
显示：网格；
网格模板列：[产品图像]6rem[产品详细信息]最小值（11rem，24rem）[产品价格]5rem[产品数量]5rem[产品移除]6rem[产品总价]5rem；
栅柱间隙：0.5雷姆；
网格模板行：1fr；
边框底部：1px实心#eee；
对齐项目：居中；
}
[类别*=“购物车\标题\标签”]{
文本对齐：居中；
}
.购物车标题标签价格{
网格列开始：产品价格；
}
.shopping-cart\uuuuu header\uuuuu label-quantity{
网格列开始：产品数量；
}
.shopping-cart\uuuuu header\uuuuu label-total{
网格列开始：产品总价；
}
.购物车.产品行.产品图像img{
宽度：100%；
}
.购物车.产品行.产品图像{
网格列开始：产品图像；
}
.购物车.产品行.产品详细信息{
网格列开始：产品详细信息；
显示器：flex；
弯曲方向：立柱；
填充：0.625rem；
}
.购物车.产品行.产品详细信息.产品标题{
左侧填充：0.635rem；
}
.购物车.产品行.产品价格{
网格列开始：产品价格；
}
.购物车.产品行.产品数量{
网格列开始：产品数量；
}
.购物车.产品行.产品数量输入{
宽度：2.5雷姆；
}
.购物车.产品行.产品移除{
网格列启动：产品移除；
}
.购物车.产品行.产品总价{
网格列开始：产品总价；
}
.购物车.产品行.产品总价：bef