Alternatives to Float for margin: auto issues

I'm new to web developing and made a grid of images using float:left. However I need this grid to be centered. I've been reading through a lot of questions here and know these two are an incompatible quarreling married couple. I added Display:block to all of my parent divs and widths, played around a little with clears but the grid seems to really take the float: left to heart.

What would be the proper way to have this grid while centering it within a parent div?

<div class="maincontent">
    <div class="imgrid"> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
    </div>
</div><!--main content-->
</div> <!--wrap-->

And the CSS:

.wrap {
    height: 100%;
    width: 100%;
    background:#B90609;
}

.maincontent{
    display:block;
    width: 80%;
    padding-top: 5%;
    margin:auto;
    background:#8810C5;
    clear:both; 
}

.col {
    float: left;
    background:#2A17D1;
    display:block
}
.col-sm {
    width: 40%;
    padding: 1%;
    height: auto;
    display:block;
}
.col-sm img{
    width: 100%;
    height: auto;
    display:block;
    overflow:hidden;
    display:block;
    clear:both;
}

I also wasn't sure how to get the images on here so I attached a picture of what it looks like.

Solution

Use display: flex; flex-wrap: wrap; justify-content: center; on the parent to create a row that wraps it's contents and centers it horizontally, and you can remove the floats.

.wrap {
    height: 100%;
    width: 100%;
    background:#B90609;
}

.maincontent{
    display:block;
    width: 80%;
    padding-top: 5%;
    margin:auto;
    background:#8810C5;
    clear:both; 
}

.imgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
    background:#2A17D1;
    display:block
}
.col-sm {
    width: 40%;
    padding: 1%;
    height: auto;
    display:block;
}
.col-sm img{
    width: 100%;
    height: auto;
    display:block;
    overflow:hidden;
    display:block;
    clear:both;
}

<div class="maincontent">
    <div class="imgrid"> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
    </div>
</div><!--main content-->
</div>