我如何使CSS網格具有背景色？

Question

我一直在嘗試制作均勻的3x2網格。 一些塊較長，而其他一些塊，我希望它們的長度相同。 實現此目標的最佳CSS做法是什么？ 這些圖片是我到目前為止完成的。

的HTML

<div class="column col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="service-block-two single-item" id="service_pest">
<div class="inner-box">
<div class="content">
<div class="clearfix top-area">
<div class="text">
<h4>Insect Control</h4>
</div>
</div>
<p>Insect control is an on going maintenance issue on Nantucket. We recommend foundation treatments 2-3 times per year to keep all kinds of insects at bay. Ants, pill bugs, earwigs and a whole host of other insects can be a nuisance, let us deal with them so you don't have too.
</p><br>
<div class="link"><a href="http://mjstokes.com/buzzoff/pest-control/" class="btn-style-one">More Details</a></div>
</div>
</div>
</div>
</div>

的CSS

.service-block-two{
    position:relative;
    margin-bottom: 100px;
    background-color: #f7f7f7f7;
    padding-top: 35px;
    padding-bottom: 35px;

}

.service-block-two .content p {
    text-align: center;
    width: auto;
}

.service-block-two .content .link {
    text-align: center;
}

Answer 1

您可以使用新的CSS網格功能輕松實現此目的。 瀏覽器支持相當不錯。 您可能需要添加供應商前綴才能最大程度地支持瀏覽器。

基本上，您需要一個父div來容納/包裝其子對象（對於您的情況，這將是灰色框）。

假設這是HTML：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

使它成為3（column）x2（row）網格的css將是：

.parent {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-gap: 15px;
}

.child {
    background: #f7f7f7;
    padding: 15px;
}

一行中的所有列都將具有相同的高度，並等於最高的列。 這是一個有效的Codepen鏈接，可用於實際操作。

Answer 2

CSS grid是一個不錯的選擇，並且在受支持的情況下也可以很好地工作。

如果需要瀏覽器支持，則還可以使用flexbox ，它的支持會稍好一些。 無論哪種方式，您都需要供應商前綴。

代碼筆示例： https : //codepen.io/anon/pen/GeQREE

CSS更改相當簡單。 父/包裝元素需要以下內容：

display: flex;
flex-wrap: wrap;

對於孩子來說，最簡單的更改是寬度。 就像是：

width: 31%;
margin: 1%;

（總寬度為33％或3跨）

希望這可以幫助！

• 網格支持： https : //caniuse.com/#feat=css-grid
• Flex支持： https ： //caniuse.com/#feat=flexbox