Как реализовать данную сетку с помощью grid/flex?

Question

[ForSureN1]

Добрый день. Прошу помочь подкинуть идеи как можно реализовать данную сетку, с учетом того, что если будут добавлять новые ячейки, они просто буду сдвигаться вправо, так же оставляя спереди 2 пустых ячейки, заранее благодарю

Comments

[Ankhena]

Делаете гридами сетку.
Первому блоку говорите grid-column-start и указываете ту линию, с которой он должен начаться.
https://jsfiddle.net/mjzrefwu/

[ForSureN1]

Ankhena, Спасибо, разобрался

Answer 1

[Александр Макаров]

Comments

[Ankhena]

Это же гриды, зачем пустые ячейки?

[Александр Макаров]

Использовал такой вариант для своего дейтпикера, для разных месяцев разное количество пустых колонок сначала. Что бы не писать лишний css добавляю пустые дивы. Возможно это не лучшая практика

[msdoc11]

Можно рассчитать точное расстояние в процентах и родителю верхних блоков дать внутренний отступ слева

.wrp{
  padding-left:33%
}

Это код для примера выше

[Александр Макаров]

msdoc11, ничего там считать не надо, у гридов есть свойство грид колумн старт, которое указывается для первого элемента сетки. И указывается насколько кубиков надо отступить. Но моё первое решение мне нравиться больше. Потому что если будет второй такой же элемент но с другим количеством отсупов то увеличиться количество стилей. Либо проще добавляешь нужное количество пустых кубов

[msdoc11]

Александр Макаров, Костыли в виде пустых дивов, это конечно прекрасно). Но одно свойство с отступом думаю будет лучше, чем городить такую конструкцию. Grid column start работает когда сетка задана вручную, например 1fr 1fr 1fr 1fr, если это repeat, то уже не работает.

[Александр Макаров]

msdoc11, ну как же не работает?. А если у вас 20 таких блоков и в каждом разный отступ?

[msdoc11]

Александр Макаров, Это можно решить стилями как описал выше, а ваше решение подразумевает и стили и пустые блоки, что не очень уж и компакто получается