Automatically wrap elements to fit parent width and on demand

Question

Is there a way have a responsive design where elements are automatically moved to new row to fit width of the container and also move elements with a specific class and its following siblings to a new row ?

For example I have a list of elements, and I need to display newRow elements on a new row

.box>*{width:4em;border:1px solid;padding:0.2em;display:inline-block;vertical-align:top}
.box>*>*{display:inline-block;width:1em;height:1em;background-color:lightblue;border:1px solid;margin:0.1em}
.newRow{background-color:pink;border-radius:33%}
.box>*::before{content:attr(class);display:block;text-align:center;border-bottom:1px solid;margin-bottom:0.2em}
.expected{background-color:lightgreen}

/* attempts */
.block >.newRow
{
  display: block;
}

.before-nl >.newRow::before
{
  content: "\a";
  white-space: pre;
}

.float >.newRow
{
  float:left;
}


/* changes go here */
.default
{
}

.default > *
{
}

.default > .newRow
{
}

<div class="box">
  <div class="expected">
     <div></div><div></div><div></div><div></div><br><div class="newRow"></div><div></div><br><div class="newRow"></div><div></div><div></div><div></div><div></div><br><div class="newRow"></div><div></div><div></div><br><div class="newRow"></div><br><div class="newRow"></div><div></div>
  </div>
  <div class="default">
    <div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div class="newRow"></div><div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div></div><div class="newRow"></div><div class="newRow"></div><div></div>
  </div>
  <div class="block">
     <div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div class="newRow"></div><div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div></div><div class="newRow"></div><div class="newRow"></div><div></div>
  </div>
  <div class="before-nl">
     <div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div class="newRow"></div><div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div></div><div class="newRow"></div><div class="newRow"></div><div></div>
  </div>
  <div class="float">
     <div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div class="newRow"></div><div></div><div></div><div></div><div></div><div class="newRow"></div><div></div><div></div><div class="newRow"></div><div class="newRow"></div><div></div>
  </div>
</div>

I'm trying to avoid adding new elements into HTML (aka wrapping sections into containers)

Any tips?

The proposed "answer" doesn't cover the part where children wrapped on demand.

Automatically wrap elements to fit parent width and on demand

0 Answers0