Css 如何在网格显示的下一行中指定一列空间

我有几个div，我想在网格的每一个后续行的左侧留下一个div的空间。例如，我希望第一行有4个div框，第二行有3个div框，第三行有2个div框，依此类推

示例

CSS

    .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 1px;
    grid-auto-flow: row;
    grid-auto-rows: 100px 100px;
}
* {box-sizing: border-box;}
.wrapper > div {

    border-radius: 5px;
   background-color: #DCE0E7;

    padding: 1em;
    color: #d9480f;
}

HTML

    <div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
    <div>nine</div>
     <div>ten</div>
</div>

一个
两个
三
四
五
六
七
八
九
十

仅使用

css

而不使用

javascript

或

scss

，使用

nth-child（）

可以帮助创建类似的内容

/*从左开始*/
.wrapper，.wrapper*{
框大小：边框框；
}
.wrapper>div{
宽度：20%；
浮动：左；
高度：40px；
边框：1px实心#aaa；
}
.wrapper>div:n子级（6）{
左缘：20%；
}
.wrapper>div:n个子项（10）{
左缘：40%；
}
.wrapper>div:n子级（13）{
左缘：60%；
}
.wrapper>div:n子级（15）{
左缘：80%；
}
/*从右边开始*/
/*.wrapper，.wrapper*{
框大小：边框框；
}
.wrapper>div{
宽度：20%；
浮动：对；
高度：40px；
边框：1px实心#aaa；
}
.wrapper>div:n子级（9）{
左缘：20%；
}
.wrapper>div:n子级（12）{
左缘：40%；
}
.wrapper>div:n子级（14）{
左缘：60%；
}
.wrapper>div:n子级（15）{
左缘：80%；
}*/

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

像一个反向的地板台阶吗？是的，这正是我想要的。thanx很多。你能不能从第一个div开始，而不是从第五个div开始。。