Creating a dashboard evenly distributed and with flow behavior

Question

I am trying to build a dashboard for a web application. The requirements are for this screen to be responsive to the client screen in the following way:

1. Dashboard should hold 4 widgets (same size) in a row. The widgets should be distributed across the screen evenly.

2. When the minimum size of the screen does not allow all widget to be displayed (with minimal space between them) those widgets that cannot fit, should continue to the next line (flow).

Now i saw this post that answers the first definition but I could not find a way to enforce the flow behavior on it with the second idea. Does anyone has a clue of how it can be done?

Answer 1

You need to give your widgets a width and height and make them display:inline-block:

HTML:

<div class="widget">One</div>
<div class="widget">Two</div>
<div class="widget">Three</div>
<div class="widget">Four</div>

CSS:

.widget {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: 2px;
    display: inline-block;
}

Live example here.