仍然與嵌套網格混淆

Question

我終於找到了一些時間來測試奇點，並回到我之前遇到的問題，因爲我找不到明顯的解決方案。

我的問題是嵌套網格。 比方說，我有一個簡單的12列格

$grids: add-grid(12 at $break2); 

我的佈局使用擴展對於那些12列的9主體內容區域：

@include breakpoint($break2) { 
    @include grid-span(9, 3); 
    border: 1px solid red; 
} 

的，該內容區域內，我需要創建一個分爲三列的部分，這意味着每個內部文章將跨越父容器的3列（9列中的9列）。

我試着用下面的代碼，但不能得到它的工作。

.highlights{ 
    overflow: hidden; 
    border: 1px solid black; 

    article{ 

     @include float-span(3); 

     &:nth-child(3n){ 
      @include float-span(1, 'last'); 
     } 
    } 
} 

我的目標是有一個簡單的聲明，在那裏我可以有一個普通產品聲明的每一篇文章，通過一個規則的最後一篇文章每行中就像我之前所做的那樣。

也許我困惑了，因爲我太使用與當前電網系統IM，你能在這方面幫助。 什麼是最好的和最實用的方法來嵌套網格，以便他們可以與他們的父元素對齊？

Answer 1

所以，你所遇到的問題是你沒有改變電網範圍內，並仍在使用在這一點上你的全球12柱網環境。您需要將網格上下文更改爲9，因爲您現在位於9列網格內。以下應解決您的問題：

.highlights{ 
    overflow: hidden; 
    border: 1px solid black; 

    article{ 
    @include layout(9) { 
     @include float-span(3); 

     &:nth-child(3n){ 
     @include float-span(1, 'last'); 
     } 
    } 
    } 
}