css - CSS Grid 列宽取决于内容

Question

我正在渲染 CSS Grid，每行一列将渲染：

• 没有什么
• 宽度为 120px 的按钮（我们称之为类型 1）
• 宽度为 185px 的按钮（类型 2）
• 两种按钮类型，在这种情况下，它们都应该是 185px 宽度

当我什么都不渲染时，所有行都不会在该列中渲染任何内容，所以我希望该列的宽度为 0，其他列应该分割剩余空间。

呈现按钮类型 1 时，我希望该列的宽度为 120 像素，并且不呈现按钮的行应显示该宽度的空白空间（不破坏布局）

当我呈现两种类型的按钮时（所以有些行包含按钮类型 1，有些包含按钮类型 2，有些不包含任何内容）我希望该列采用更宽按钮的宽度 - 185px。

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（我只是在试验）

示例：https ://codepen.io/idjuka/pen/wvarPrN 在此示例中，如果我要删除最后一行（按钮较宽），我希望上部按钮的宽度更小。按钮上是否可以有 100% 的宽度，但是用 css 网格确定列的宽度 - 如果内容宽度是 xyz px -> 列宽应该是 xyz px，

标签： csslayoutcss-grid