Воспроизведение "обтекания строк" flex с помощью CSS Grid - PullRequest
Новая
       10

Воспроизведение "обтекания строк" flex с помощью CSS Grid

0 голосов
/ 26 апреля 2019

Я пытаюсь создать строку с нефиксированным числом ячеек, которая имеет следующие свойства:

  • Ячейки должны иметь размер только их содержимого, не больше, не меньше;
  • Строка должна быть размером только ее ячеек (+ пробел), не растягиваться и не уменьшаться ни при каких обстоятельствах);
  • Строка должна разбивать строки только в том случае, если принудительное расположение окружающего макета предотвращает переполнение, как flex-wrap: row wrap;
  • Строка должна «навязывать» свой размер окружающему макету, пока ничего не переполняется (поэтому, если строка является братом для flex-grow: 1 div, строка не должна ломать свою линию);
  • Если возможно, все это без установки какого-либо стиля для ячеек и без медиазапросов;

Я могу сделать это с flex и row wrap, но мне интересно, возможно ли это с display: grid.

Вот что я попробовал: 

.grid {
  display: grid;
  gap: 18px 18px;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  border: 1px solid red;
}

.grid > * {
  border: 1px solid blue;
}
<div class='grid'>
  <div>aaa</div>
  <div>aaaaa</div>
  <div>aa</div>
  <div>aaaa</div>
</div>

Это занимает слишком много места. Использование auto-fill слишком сильно уменьшает его. Как я мог это сделать?

...