How can I make my CSS grid even with the background color?

Question

I have been trying to make an even 3x2 grid. Some of the blocks are longer and the others and I want them all to be the same length. What would be the best CSS practice to accomplish that? The pictures is what I've accomplished so far.

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;
}

Please post enough code to reproduce the problem. You'll get more help and better answers. — Michael Benjamin, Mar 13 '19 at 02:26
Thanks but I believe I've provided enough code to get the correct solution. — Michael Stokes, Mar 16 '19 at 00:45

score 1 · Accepted Answer · answered Mar 14 '19 at 07:41

CSS grid is a great option and works well, where supported.

If browser support is a concern, you can also use flexbox which has slightly better support. Regardless of which, you'll need vendor prefixes.

Code Pen example: https://codepen.io/anon/pen/GeQREE

CSS changes are fairly straight forward. Parent/wrapping elements would need the following:

display: flex;
flex-wrap: wrap;

The simplest change for the children would be a width. Something like:

width: 31%;
margin: 1%;

(Total width would be 33% or 3 across)

Hope this helps!

Grid support: https://caniuse.com/#feat=css-grid
Flex support: https://caniuse.com/#feat=flexbox

Khairul Anik · Answer 2 · 2019-03-12T23:35:35.013

you can achieve this very easily with the new css grid feature. browser support is quite good. you might need to add vendor prefixes to have maximum browser support.

Basically, you need a parent div which holds/wraps its children (for your case that would be the grey boxes).

suppose this is the 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>

and the css to make this a 3(column)x2(row) grid would be:

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

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

All columns in a row will be of same height and equal to the tallest column. Here is a working codepen link to see it in action.

How can I make my CSS grid even with the background color?

2 Answers2