忽略divs顯示周圍的網格單元：網格

我有一個網格佈局有3個子節點，每個子節點跨越12列中的4個，以創建一個水平3列布局。一個簡單的例子可以在這裏看到：https://jsfiddle.net/bnyy6fde/1/。忽略divs顯示周圍的網格單元：網格

<div class="grid"> 
    <div class="grid-cell"> 
    <h3>Grid element 1</h3> 
    </div> 
    <div class="grid-cell"> 
    <h3>Grid element 2</h3> 
    </div> 
    <div class="grid-cell"> 
    <h3>Grid element 3</h3> 
    </div> 
</div>

我的CMS將每個孩子包裝在div中，這會導致網格佈局錯誤地呈現。這可以在這裏看到，由班'不工作'的div顯示：https://jsfiddle.net/e6b2yf37/2/。

<div class="grid"> 
    <div class="not-working"> 
    <div class="grid-cell"> 
     <h3>Grid element 1</h3> 
    </div> 
    </div> 
    <div class="not-working"> 
    <div class="grid-cell"> 
     <h3>Grid element 1</h3> 
    </div> 
    </div> 
    <div class="not-working"> 
    <div class="grid-cell"> 
     <h3>Grid element 1</h3> 
    </div> 
    </div> 
</div>

根據編輯器的設置，列的數量可以跨越每行1到4個元素。因此，通過給出div，'not-working'，grid-column-end來解決這個問題是不可能的：4.

不可能去除包裝CMS中每個孩子的div。

是否有純粹的CSS解決方案，它忽略了div'not-working'，無論子節點的列數是多少？

來源

2017-08-01 Andreas Christiansen

.grid {display: flex;} 
.not-working {flex-grow: 1; width: 10%;}

您的div應該現在平均填充網格。

來源

2017-08-01 12:54:36 Carele

您好Carele。不工作的，謝謝您的建議。它適用於該場景，但是我意識到我忘記了將'flex-flow：row wrap'添加到包裝器，這會使'display：flex'呈現不正確。我已經更新了這個問題以反映這一變化。 –

@AndreasChristiansen嘗試添加flex-grow：1;到你的div！ – Carele

這似乎不工作在小提琴示例：https://jsfiddle.net/e6b2yf37/3/ –

如何只改變styline到即

.not-working { 
    width: auto; 
    grid-column-end: span 4; 
}

來源

2017-08-01 14:08:33 omukiguy

謝謝你的建議，omukiguy，但該解決方案僅適用於每行正好3個元素，並且不能縮放4個或更多元素。 –

@ andreas-christiansen，除非我不能很好地解決你的問題。簽出https://codepen.io/bahiirwa/pen/breQav – omukiguy

您的解決方案每行有3個元素，但不能在每行顯示4個元素或更多元素。我正在尋找一個通用的解決方案，其中CSS可以在不工作的元素上保持不變，並且每個行的元素的數量由它的子元素（網格單元格）定義。 –

忽略divs顯示周圍的網格單元：網格

回答

相關問題