【问题标题】: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 中设置图像和段落时遇到问题

标签: html css css-grid


【解决方案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。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-08-30
    • 1970-01-01
    • 2020-04-22
    • 2015-03-12
    • 1970-01-01
    • 1970-01-01
    • 2020-08-14
    相关资源
    最近更新 更多