css - 使用 :nth-child 在网格布局中设置每 3 个元素的样式

Question

我似乎无法弄明白，下面是我试图实现的网格布局的图像。

到目前为止，我所知道的是如何使用以下内容定位前两行:

.list {
    float: left;
    width: 33%;
}

.list:nth-child(-n+2), .list:nth-child(5n+1) {
    width: 50%;
}

<div class="list"></div>

一开始还不错，但到了第三行就开始崩溃了。关于如何实现这一点有什么想法吗？

http://www.mythemer.com/wp-content/uploads/2013/12/grid-style.png

Answer 1

.list {
    float: left;
    width: 50%;
}
.list:nth-child(5n+3), .list:nth-child(5n+4), .list:nth-child(5n) {
    width: 33%;
}