html - css flex-box wrap but avoid region

Question

I have a div that uses flex and wraps the items...

#container
{
    display: flex;
    flex-wrap: wrap;
}

The items wrap to the next row when they reach the end of the container. I need a region which the items will also wrap around. Here is an example of what I want...

The items(grey) wrap the the next row when they reach the region(red).

I am wondering if this possible to do using flex-box.

Thank you.

Answer 1

Check out this proof-of-concept which uses CSS Grid Layout. You can skip a region in the grid by using a pseudo element that is empty and is explicitly placed to create the effect that wrapped elements flow around it.

See demo below:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(6, [col-start] 1fr);
}

.grid>* {
  background-color: green;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid:after {
  content: '';
  grid-row: 1; /* row 1 */
  grid-column: 4/7; /* skip columns 4 to 6 */
  border: 1px dashed #ddd;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
</div>