Как заполнить последнюю строку поддельными элементами в адаптивном макете сетки flexbox?

Question

У нас есть типичная адаптивная сетка flexbox с элементами фиксированной ширины и динамическим числом строк в зависимости от разрешения экрана и количества элементов.Например, скажем, у нас есть семь <div> с, это покажет что-то вроде этого:

Нам нужно завершить последнюю строку с помощью "fake""элементы или заполнители без дополнительного HTML:

И, если мы изменим разрешение, он должен пересчитать необходимые заполнители:

Это возможно даже с простым CSS?

Мы используем flexbox, но мы открыты для использования макета CSS Grid, еслиэто решает нашу проблему.

Answer 1

Это может быть подходом.

Хитрость заключается в том, чтобы использовать псевдоэлементы (выступающие в качестве заполнителей) для репликации каждого элемента в той же позиции на строку ниже.И используйте overflow: hidden, чтобы скрыть последний ряд псевдоэлементов, которые выходят за пределы гибкого контейнера.Вот картинка, показывающая смещение 3px и переполнение, чтобы помочь понять идею.

Но, конечно, это может иметь много недостатковв зависимости от ваших конкретных требований.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}

li {
  position: relative;
  box-sizing: border-box;
  background: #299CFF;
  width: 3em;
  height: 3em;
  margin: 0.25em;
  text-align: center;
  line-height: 3;
  color: white;
}

li::before {
  position: absolute;
  top: calc(3em + 2 * 0.25em);
  content: "X";
  display: block;
  width: 3em;
  height: 3em;
  background: red;
}

<ul class="flex">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
</ul>