我需要帮助使用Lost Grid安排div位置

Question

我的HTML代码以这种方式组织：

<div class="Container">

    <div class="Card"></div>
    <div class="Card"></div>
    <div class="Card"></div>
    <div class="Card"></div>
    <div class="Card"></div>

</div>

我的CSS组织如下：

.Container
    lost-utility clearfix

.Card:first-child
    lost-waffle 1 1 15px

.Card:nth-child(n+2)
    lost-waffle 1/2 2 15px

结果如下所示：

我的问题是我试图让第一个div跨越100％的宽度，它在图像中显示的方式，以及其余的div显示1/2的宽度。我不知道如何让第二个div向左而不是向右，然后第三个div向右和向上等等......基本上所有div在第一个div之后需要移动1.我没有能够解决这个问题。任何帮助将不胜感激。

Answer 1

这里的问题是由LostGrid的cycle引起的。因为LostGrid使用:nth-child作为选择要设置样式的元素的方法，所以顶部＆＃34; Card＆＃34;是cycle中的第一个，然后是第二个＆＃34;卡＆＃34;排在第二位......在你的布局中，第二张牌应该开始cycle而不是第二张。

我提出了三个快速解决此问题的方法。

选项1 使用LostGrid并在不同的卡片周围包含divs。

选项2 不使用LostGrid，而是使用它提供的数学并在vanilla css中创建布局。

这是一个CodePen，有三个选项：http://codepen.io/peterramsing/pen/YWrrjv

我倾向于选择2，因为LostWaffle是针对相同的卡片大小而设计的。

选项3？我添加了第三个选项。它有效，但输出了一些多余的css。但这是一个想法。

我还没有使用LostGrid遇到这样的问题，因为我要么使用Vanilla css，要么使用包含divs的问题。 LostGrid是一个用于创建网格的神奇工具，它的构建旨在帮助增强css创建网格的现有方法。有很多次LostGrid不是使用的工具，而且对于PostCSS来说它很棒，因为如果你只使用它几次就不会增加膨胀。

但是，这可能是LostGrid的一个可能的功能添加，可以对cycle进行更多控制。我会再考虑一下。

希望如果您认为cycle在以后的版本中应该对其进行一些额外的自定义，这有助于并确保让我知道。