How to get div's centered next to each other in this Bootstrap 3 grid?

Question

I have 6 divs, each of which has a specific width in number of pixels. Using Bootstrap 3 I would like to have a maximum of 3 boxes on one row/line. As the screen gets smaller it should move to 2 divs on one line, and when it gets smaller even more just 1 div on a row. How can I do this?

I expected the code below to achieve this. However, the divs displayed on one row unfortunately are not centered. How to center these divs?

.mainDiv {
    margin: 0 auto;
}

.specificWidthInNumberOfPixels {
    border: 14px solid #dd5;
    width: 160px;
    height: 160px; 
    padding: 15px;
    text-align: center;
    margin: 5px;
}

.float {
    float: left;
    display: table;
    margin: auto;
}

Update: In response to this answer: so the answer now produces the visual at the top, but instead what I'm looking for is the visual at the bottom:

user_120655 · Answer

If you can use CSS Grid, you're in good shape. Look on codepen to preview it, the code snippet seems like it's acting up:

https://codepen.io/tobyinternet/pen/bGdoBEr

.mainDiv {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.row-grid:before, .row-grid:after {
display: none;
}

.row-grid {
margin: 0 auto;
width:100%;
max-width: 500px;
display: grid !important;
grid-template-columns: repeat(auto-fit,160px);
column-gap: 10px;
row-gap: 10px;
justify-content: center;
}

.specificWidthInNumberOfPixels {
    border: 14px solid #dd5;
    width: 160px;
    height: 160px; 
    padding: 15px;
    text-align: center;
}

p {
color: white;
}

user_1354685 · Answer

You're supposed to wrap them in a container-fluid or container class with a row child element, like so:

This will display 1 row of 3 columns. Add a second row within the container div with the same 3 columns to display a second row of 3 columns

How to get div's centered next to each other in this Bootstrap 3 grid?

2 Answers