Элементы

inline-block не могут достичь этого макета - как продемонстрировано @Oriol, но

CSS Grid может достичь этого макета.

body {
  margin: 0;
}

ul {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 100px);
  min-width: 50vw;
  
  /* decorative properties */
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  border: 5px solid salmon;
  box-sizing: border-box;
  
  /* center the grid */ 
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
}
li {
  background-color: lightblue;
  height: 100px;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22

Codepen demo (обязательно измените размер)

В основном соответствующий код сводится к следующему:

ul {
  display: inline-grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 100px); /* 100px = column width - (2) */
  min-width: 50vw; /* or any user-defined min-width (3) */
}

1) Сделайте контейнерный контейнер контейнером в виде сетки. Это заставит сетку «обрезать» содержимое, чтобы ширина сетки никогда не была более широкой, чем ее содержимое.

2) Установите сетку с адаптивной компоновкой (значение auto-fill / auto-fit используется для гибких макетов). Если нет места в строке для соответствия следующему элементу - он переносится в следующую строку.

Когда адаптивный макет используется вместе с встроенной сеткой - ширина сетки будет равна ширине одной элемент сетки. (когда ширина ширины / min-ширина явно не установлена ​​- , как это )

3) Установите контейнер с минимальной шириной, которая представляет (не более - один частичный элемент меньше, чем ) желаемая максимальная ширина для контейнера.

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

Если, однако, минимальная ширина точно не соответствует ширине элементов 'n' тем, что она также входит в часть n + 1-го элемента - в этом случае сетка будет слегка расширяться до точности установите n + 1-й элемент - с переносом n + 2-го элемента в следующую строку.