css 根据内容调整网格列

y53ybaqx 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(171)

我有一个有8个元素的css网格。各列最小为100px，最大为1fr。
问题是，在较低的分辨率第一列的内容，使它在2行，我需要有这在1行。我想使列，以适应其内容，即使它是大于1fr。
我为网格准备的CSS代码是这样的，

.grid-1{
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

我知道我可以像这样为第一列设置一个固定的大小来解决这个问题，

.grid-2{
    grid-template-columns: 210px repeat(auto-fit, minmax(100px, 1fr));
}

但是，问题是我想在其他部分使用这段代码。
整个代码在这里https://jsfiddle.net/hcx72rgy/

2条答案

要通过minmax（）将列收缩到内容的宽度，可以使用max-content作为最大大小，0作为最小大小，这样它就完全收缩到它所在列的最宽内容。

repeat(auto-fit, minmax(0,max-content));

也可以使用fit-content(100%)值

.grid {
  grid-template-columns: fit-content(100%) fit-content(100%) 1fr;
}

然后，您需要将子元素的宽度大小定义为fit-content

.item {
  width: fit-content;
}