Question

我在这里有一个Codepen-https://codepen.io/anon/pen/KxLzMV

它是一个使用丢失的简单网格。

最后一列具有嵌套的网格。

此嵌套网格在第一列之后有一个右边距。

我尝试使用cycle选项将其删除，但无法正常工作。

如何在嵌套网格上删除此边距。

@use lost;

*{
  margin: 0;
  padding: 0;
}

body{
  background: lightgrey;
}

.block{
  background: white;
  max-width: 1000px;
}

ul{
  list-style: none;
  lost-utility: clearfix;
  overflow: auto;
}

.mobile-arrow{
  display: none;
  float: right;
}

.info{
  padding: 10px;
}

.one{
  background: pink;
  lost-column: 2/5;
}

.two{
  background: pink;
  lost-column: 1/5;
}

.three{
  background: pink;
  lost-column: 2/5;
}

.three-inner__1{
  background: red;
  lost-column: 4/5 ;
}

.three-inner__2{
  background: green;
  lost-column: 1/5;
}

@media(max-width: 650px){
  .mobile-arrow{
    display: block;
  }
  .one{
    lost-column: 3/5;
  }
  .two{
    lost-column: 2/5 2; 
  }
  .three{
    margin-top: 10px;
    lost-column: 1/1;
    lost-move: 0;
  }
}

Answer 1

您可以使用第三个参数覆盖边距：

.three-inner__1{
   background: red;
   lost-column: 4/5 0 0px;
}

Lost documentation on column

Updated codepen

CSS-丢失的网格，从嵌套网格中删除边距

1 个答案: