javascript - Creating a dashboard evenly distributed and with flow behavior -

i trying build dashboard web application. requirements screen responsive client screen in following way:

1. dashboard should hold 4 widgets (same size) in row. widgets should distributed across screen evenly.

2. when minimum size of screen not allow widget displayed (with minimal space between them) widgets cannot fit, should continue next line (flow).

now saw post answers first definition not find way enforce flow behavior on second idea. has clue of how can done?

you need give widgets width , height , 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.