Пустая ячейка во flexbox

Есть обычный flebox с элементами:
.flexbox { display: flex; border: 2px solid red; padding: 2.5px; } .flexbox__item { border: 2px solid blue; height: 50px; margin: 2.5px; flex-grow: 1; }

Как вставить в этот flexbox пустую ячейку после offset не использую дополнительной разметки и after с before?
Т.е. нужно, чтобы вышло вот так, но без указания ширины у блоков. Только flex-grow
.flexbox { display: flex; border: 2px solid red; padding: 2.5px; } .flexbox__item { border: 2px solid blue; height: 50px; margin: 2.5px; width: 25%; } .offset-1 { margin-right: calc(25% + 5px); }

Количество ячеек неизвестно. Offset-1 означает, что нужно сделать пустую одну ячейку, offset-2 - две и т. д.

Ответ

Можно с дополнительными обертками - расти будут обертки, а элементы-ячейки внутри растущих оберток будут занимать 1/2, 1/3 и т. д. ширины оберток.
.flexbox { display: flex; border: 2px solid red; padding: 3px; } .flexbox__item { margin: 3px; flex-grow: 1; } .flexbox__item-inner { border: 2px solid blue; height: 50px; } .offset-1 { flex-grow: 2; } .offset-1 .flexbox__item-inner { width: 50%; } .offset-2 { flex-grow: 3; } .offset-2 .flexbox__item-inner { width: 33.33%; }