Is there a way to dynamicly take out HTML elements from a grid or flexbox?

Issue

Is there a way that if I have a grid like this:

.grid {
  display: grid;
  justify-content: start;
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

By applying a .right class some elements are taken out of the order and placed at the end of the grid and justified to the right (end).

I'm trying to achieve something like this:

The hardship comes from not knowing ahead of time how many .left and .right items there will be...

Solution

Flexbox can do that with order and margin on the appropriate elements.

We can also leverage :nth-child(n of x) to select the first classed element to which to apply the margin.

Support

.flexy {
  display: flex;
  margin-top: 25px;
}

.item {
  border: 1px solid grey;
  padding: 0.25em;
}

:nth-child(1 of .right) {
  margin-left: auto;
}

.right {
  order: 2;
}

<div class="flexy">
  <div class="item">Item 1</div>
  <div class="item right">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item right">Item 4</div>
</div>

<div class="flexy">
  <div class="item">Item 1</div>
  <div class="item right">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item right">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item right">Item 6</div>
</div>

Answered By - Paulie_D