如何在 CSS 网格中偏移 div答案

【问题标题】：How to offset a div in a css grid如何在 CSS 网格中偏移 div
【发布时间】：2022-02-12 19:25:29
【问题描述】：

可以在 css 网格 中“偏移”一个 div，如图所示 ?

【问题讨论】：

提供左边距，例如：margin-left:20px;
为什么不只是设置适当的列大小，而不是尝试偏移元素以占据更多/更少/不同的网格区域？
是关于 display:grid 的吗？您是否为孩子设置了任何列和任何跨度值...？您是否有显示您的问题的 HTML 和 CSS 示例？请澄清你的问题。 CSS 网格中没有偏移，仅跨越列和/或行
是的，我有一个我正在工作的代码，但这可能是题外话，因为我在此 div 中设置图像和段落时遇到问题

【解决方案1】：

考虑负边距：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 500px;
  height: 200px;
  border: 1px solid;
}

.box {
  grid-column: 2/3;
  margin-left: -20px;
  margin-right: -80px;
  background: red;
}
.box-alt {
  grid-column: 2/3;
  grid-row:2;
  background: blue;
}

<div class="container">
  <div class="box"></div>
  <div class="box-alt"></div>
</div>

【讨论】：

我相信这里的诀窍是设置一个 6 或 9 列的模板并使用 spanning 。常规跨越 2 或 3 个 cols，而一个看起来偏移量跨越一个额外的 col 或在 col 4 而不是 3 ... ;)
@G-Cyr true 但我的看法不同......我以为他会首先使用行/列定义网格内的元素，然后我们想为其添加一些偏移量:)跨度>

【解决方案2】：

<div class="container">
    <div class="area1"></div>
    <div class="area2"></div>
</div>

.container{
    display: grid;
    grid-template: 1fr / repeat(3, 1fr);
    grid-template-areas: "area1 offset area2";
}
.area{
    width: 100%;
    height: 40px;
}
.area1{
    background-color: red;
}
.area2{
    background-color: yellow;
}

【讨论】：

【解决方案3】：

如果你在 this link 中使用 Mozilla 的指南，你可以像这样使用空 div 作为偏移 div：

<div class="container">
   <div class="row">

       <!-- Empty/Offset Div Here -->
       <div class="col-xl-2"> </div> 

       <div class="col-xl-8">
          <!-- Content Here -->
       </div> 
   </div>    
</div>

【讨论】：

这不是假设使用原始帖子中未提及的引导程序吗？
不使用Bootstrap，而是用网格系统代替。
.col-xl-8 定义在哪里？
我关注getbootstrap.com/docs/4.0/layout/grid/#grid-options 获取网格选项值。在 Mozilla 的帖子中，它定义了自定义列类，例如 @media (min-width: 1200px) { .col-lg-12 { grid-column: span 12 } 然后我定义了 col-xl-* 类，因为您可以定义自定义类。
我明白了 - 他们的指南还提供了您可能想要包含的 CSS。