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

  • 本文关键字:网格 嵌套 删除 CSS css
  • 更新时间 :
  • 英文 :


我这里有一个代码笔 - https://codepen.io/anon/pen/KxLzMV

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

最后一列具有嵌套网格。

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

我尝试使用循环选项删除它,但它不起作用。

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

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

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

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

列上的文档丢失

更新的代码笔

最新更新