Html 使用固定宽度的单元格设置栅格样式

我有7个固定宽度（256px）和

margin:20px

的组件，我希望它们在网格中对齐，但我试图使最后一行中的最后一项始终对正，以便它与最右边的列对齐。我还希望柱网轴线在页面上居中。我试过几次，但都卡住了

我试着用一个flex-box来做这件事，虽然我完全有可能遗漏了一些flex-box可以让它工作的东西，但我没有任何运气。我得到的最接近的结果是：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
}

.grid div:last-child {
  margin-left: auto
}

但是“对齐”内容在使组件位于页面中心的同时，如果最后一行的组件少于其他行，则会使这些组件居中，并破坏网格效果

我也尝试过不使用弹性盒的方式，并且接近于：

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
   float: left;
}

.grid div:last-child {
  float: right;
}

这是非常接近我只需要一种方法来设置网格的宽度是256px的倍数（好吧，296px，因为有边距），然后在父网格中居中。媒体查询完全可行，但我觉得应该有一个更直接的解决方案

（图片以防我解释不清楚）

我正在寻找的行为：

不正确的行为：

HTML供参考：

<div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>

---

通过几个媒体查询，您应该能够做到这一点，即使用伪元素作为重影元素，并填补最后一项和第二项之间的空白

在这里，我也给了

网格一个最大宽度，所以一行中不能有5个，我这样做是因为如果你需要的话，你需要一个额外的元素作为第二个最后一个作为重影，因为需要3个重影元素（2个伪+1）来解决这个问题

如果您需要在一行中放入5个元素，只需将其中一个伪元素的大小增加一倍，即256px+256px+40px（边距为40px），一行中放入6个元素，宽度为3倍，以此类推


html，正文{
保证金：0；
}
.电网{
显示器：flex；
柔性流：行换行；
证明内容：中心；
}
.grid分区{
利润率：20px；
宽度：256px；
高度：48px；
背景：浅灰色；
}
.grid div：类型的最后一个{
订单：2
}
@媒体屏幕和屏幕（最小宽度：592px）{
.grid：：之后{
内容：''；
利润率：20px；
宽度：256px；
身高：0；
顺序：1；
}
}
@媒体屏幕和屏幕（最小宽度：888px）{
.grid：：之前{
内容：''；
利润率：20px；
宽度：256px；
身高：0；
顺序：1；
}
}
@媒体屏幕和屏幕（最小宽度：1184px）{
.grid：：之前{
显示：无；
}
}
@媒体屏幕和屏幕（最小宽度：1480px）{
.grid：：之前{
显示：内联；
宽度：552px；
}
}
作为我有多固执的证明，以下是我的解决方案

诀窍是有一些元素可以被2..3..4..5整除，所以根据需要添加更多的元素

当然，这太难看了，我选择隐藏源代码：-(


.grid{
显示器：flex；
柔性流：行换行；
证明内容：中心；
边框：实心1px红色；
}
.grid分区{
利润率：20px；
宽度：256px；
高度：48px；
背景色：番茄；
}
.grid div：类型的最后一个{
背景色：紫红色；
顺序：3；
利润上限：-68px；
}
.网格跨度{
利润率：0px 20px；
宽度：256px；
高度：0px；
顺序：2；
}
.网格跨度：第一种类型{
边缘顶端：40px；
高度：48px；
}

发布您的html，too@MichaelCoker添加！用5分钟击败你：）。。。但我喜欢不需要媒体查询的事实（希望如此）。当您连续有4个时，它会中断，并且不会按预期流动。这不需要媒体查询就可以解决吗？你当然知道了。。。我在等。。顺便说一句，它在连续5秒时中断well@LGSon至少我已经取得了一些可以称之为解决方案的东西丑陋的，是的…但我仍然对你的固执印象深刻，并且确实找到了一种方法+1伟大的解决方案。我仍在试图找到一个没有媒体质疑的解决方案；但可能得不到真正有效的东西