如何在css网格中偏移div

vyswwuz2  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(116)

可以在css网格中“偏移一个div,如图?

所示

2mbi3lxu

2mbi3lxu1#

考虑负利润:

.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;
}

个字符

vfwfrxfs

vfwfrxfs2#

<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;
}
mwg9r5ms

mwg9r5ms3#

如果您在this link中使用Mozilla的指南,您可以使用如下所示的空div作为offset 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>

相关问题