С помощью какого инструмента можно сверстать то что на картинке?

Question

[Сергей Мурин]

Именно вот такое расположение.

Comments

[Алексей]

Flex или Grid

[Ankhena]

Флексами

[Сергей Мурин]

Забыл одно уточнение, для битрикса

[Froggyweb]

Сергей Мурин, А что это меняет?

[Adamos]

Сергей Мурин, бэкенд к данному вопросу не имеет совершенно никакого отношения.
Битрикс там, Джанго или вообще ничего - без разницы.

[Сергей Мурин]

Если это можно сверстать одним классом, то как это сделать

[Вадим]

Сергей Мурин, https://developer.mozilla.org/en-US/docs/Learn/CSS...
Начните с этого:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

p.s. вместо gap может быть стоит выбрать margin, так как gap для флексов поддержка не идеальная.

[Сергей Мурин]

Спасибо

[Ankhena]

Сергей Мурин,

Если это можно сверстать одним классом, то как это сделать

В один не получится. Либо класс будет у списка, а li сделаете дочерним селектором по классу.
Но я имею в виду, что судя по скрину, в один селектор не выйдет, там намек на flex-grow, а его задают флекс-элементам.

Если grow не нужен, то да, просто flex и flex-wrap списку.

Если нужен, то соответственно, задавайте его детям. И ещё ::after для родителя, чтобы на последней строке не было слишком большого растяжения (опять таки, если нужно)

[modelair]

Figma, adobe XD

Answer 1

[Ankhena]

Answer 2

[Василий Банников]

На display:flex похоже