如何偏移网格项目，同时移动其兄弟？ [复制]答案

【问题标题】：How to offset a grid item, also shifting its siblings? [duplicate]如何偏移网格项目，同时移动其兄弟？ [复制]
【发布时间】：2020-05-12 23:58:50
【问题描述】：

我正在使用 CSS 网格。我想偏移一个元素，使其在网格列中水平移动。我还希望这个元素保持其当前宽度，并将偏移值另外应用于元素的宽度。

例子：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.item {
  grid-column: span 1;
  background-color: orange;
  border: black solid 1px;
  height: auto;
  padding: 20px;
  text-align: center;
}

.offset {
  margin-left: 100px;
}

<div class="container">
  <div class="item offset">1/4</div>
  <div class="item">1/4</div>
  <div class="item">1/4</div>
</div>

问题是我希望三个网格项简单地移动到右侧，同时保持grid-column: span 3;定义的当前宽度

我真的很想保持这种灵活性，这样我就不必相应地调整其他列。即 - 如果我试图偏移第二列，我希望最后一列自动移动。

我怎样才能做到这一点？

【问题讨论】：

那你不是在寻找网格。这是一个 flexbox 作业
这不是一个很有帮助的评论 - 为什么你会说网格不合适？
因为每个项目都属于一个网格单元格，并且不同项目之间没有更多的关系，如果您想应用“偏移逻辑”，那么您所描述的不再是一个网格。您不能偏移一列并且列之间有空白空间
查看引导文档以及它们如何实现“offest 逻辑”，您将更好地了解如何处理此问题
感谢 Termani。我看了一下，发现他们使用 flexbox。

标签： html css css-grid

【解决方案1】：

我不是 100% 确定您想要实现什么，但也许这会有所帮助：

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  padding-left: 100px;
}

.item {
  grid-column: span 1;
  background-color: orange;
  border: black solid 1px;
  height: auto;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item offset">1/4</div>
  <div class="item">1/4</div>
  <div class="item">1/4</div>
</div>

【讨论】：

嗨@demkovych 感谢您的快速回复。我刚刚编辑了我的问题，并根据我希望它灵活的事实对其进行了更新，以便如果我要使用偏移量更新其他列，它们会自动流动。因此，虽然您的回答确实满足了我的特定需求，但我只是将其用作示例，这不是一种灵活的方法。