CSS Ширина столбца сетки в зависимости от содержимого - PullRequest
Новая
       42

CSS Ширина столбца сетки в зависимости от содержимого

0 голосов
/ 05 марта 2020

Я рендеринг CSS Сетка с одним столбцом на строку, которая будет отображать либо:

  • ничего
  • кнопка (назовем это тип 1) шириной 120px
  • (тип 2) шириной 185px
  • оба типа кнопок, в этом случае они оба должны иметь ширину 185px

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

Когда визуализируется тип кнопки 1, я хочу, чтобы этот столбец имел ширину 120 пикселей, а строки, которые не При рендеринге кнопки должно отображаться пустое пространство этой ширины (чтобы не нарушать компоновку)

Когда я отображаю оба типа кнопок (поэтому некоторые строки содержат тип кнопки 1, некоторые содержат тип кнопки 2, а некоторые ничего не содержат) Я бы хотел, чтобы этот столбец занимал ширину более широкой кнопки - 185 пикселей.

Я пытался добиться этого с установкой minmax(0, 185px) в grid-template-columns, но безуспешно, поскольку в этом случае он всегда устанавливает ширину на 185px. Любые идеи по этому поводу будут оценены

Столбцы помещаются в оболочку сетки, которая имеет стиль 

.CSSGrid {
    grid-template-columns:
48px minmax(100px, 3fr) 140px 140px minmax(200px, 1fr) minmax(100px, 1fr) max-content 50px;
}

Столбец, который содержит кнопки, следующий за последним, значение max-content (I просто экспериментировал)

Пример: https://codepen.io/idjuka/pen/wvarPrN В этом примере, если бы я хотел удалить последнюю строку (с более широкой кнопкой), я бы хотел, чтобы верхняя кнопка имела меньшую ширину. Можно ли иметь ширину 100% для кнопки, но определить ширину столбца с помощью сетки css - если ширина содержимого равна xyz px -> ширина столбца должна быть xyz px,

...