Css Flex-box Wrap But Avoid Region

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.

Solution 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;
}

<divclass="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>