忽略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显示周围的网格单元：网格

回答

相关问题