css网格根据子内容宽度动态自动填充

Question

是否可以使用基于子内容宽度的动态宽度的CSS网格。 我认为答案是否定的，只是检查一下。

正在尝试这个，但没有成功。

const Grid = styled.div`
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  grid-template-rows: repeat(auto-fill, 1fr);
  column-gap: 10px;
  row-gap: 20px;
`;

Answer 1

#g{
padding: 3px;
display: inline-grid; /* surprise :) */
border: 3px solid red;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
b{
border: 1px solid gray;
}

<input type='range' min='0' max='100'
    oninput='document.getElementById("r").style="width: " + this.value + "px;";'>

<div id='g'>
<b>1</b>
<b id='r'>1</b>
</div>
<img src='#' alt='some content'>
<hr>