Как стилизовать CSS-сетку, чтобы она автоматически размещала элементы без расширения контейнера - PullRequest
Новая
       40

Как стилизовать CSS-сетку, чтобы она автоматически размещала элементы без расширения контейнера

0 голосов
/ 07 ноября 2019

У меня есть три элемента:

  • Контейнер (div) с фиксированной шириной
  • Сетка (CSS-сетка) с 3столбцы, без строк и шириной 100%.
  • Blobs (div) со статической высотой и переменной шириной.

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

Код Песочница

https://codesandbox.io/s/react-hooks-counter-demo-mekr7?fontsize=14

Вот как выглядит макет:

enter image description here

Как видите, капли (квадраты) перетекают за пределы контейнера (красная граница).

Вместо этого я хочу, чтобы BLOB-объекты использовали столбец только при наличии свободного места. Если нет, то BLOB-объект должен автоматически перейти к следующей строке.

Мой CSS 

const Container = styled.div`
  width: 500px;
  border: 3px solid red;
  margin-bottom: 10px;
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-content: start;
`;

const SquareBlob = styled.div`
  height: 100px;
  width: 100px;

  background-color: lightseagreen;
`;

const WideBlob = styled.div`
  height: 100px;
  width: 200px;
  background-color: lightblue;
`;

Ограничения

  • Пятна должны иметь заданную ширину. Либо через width, либо minWidth
  • Контейнер должен иметь заданную ширину

Вещи, которые я пробовал

  • , используя grid-template-columns: minmax(0, 1fr) вместовсего 1fr . Эта настройка дает:
  • boxes not working
  • Установка переполнения и минимальной ширины свойств для этогоОтвет StackOverflow
  • Упаковка Blob внутри div с набором max-width .
...