CSS网格最小内容不适合内容 [英] CSS Grid min-content not fitting content

问题描述

我试图通过为元素显式分配行，列和大小，并允许CSS网格使用以下CSS进行列和行大小调整工作，来将一些div放入网格中。

 显示：网格； 
 grid-auto-columns：最小内容； 
  

最低含量的值应该是将列设置为最适合内容的最小大小，而不会发生溢出。但是，这没有发生。即使这些元素都可以容纳在一个350px的网格中，但第三列太大了，导致不必要的空格。

这里是正在发生的情况的图像。

>

这是实际代码：

现在，您可以看到第二行发生了什么。代码如下：

 ＃w3 {
 width：100px; 
网格列：1/2； 
网格行：2/3; 
} 
 
＃w4 {
宽度：150像素； 
网格列：2/4； 
网格行：2/3; 
} 
 
＃w5 {
 width：100px; 
网格列：4/5； 
网格行：2/3; 
} 
  

• 第一项（＃w3 ）的宽度为100px。完全适合＃w1 创建的第一列。




• 第二个项目（＃w4 ）的宽度为150px。 100px非常适合＃w1 创建的第二列。另外50px延伸到由＃w2 创建的第三列，宽度为75px。 留下25px的间隙，表示第三列中的剩余空间。




• 第三项（＃ w5 ）的宽度为100px。但是由于它是从第75像素宽的第四列开始的，因此剩余的25px会溢出容器。

底线： 在Chrome中，显示第一行后，列的宽度是固定的。

---

Firefox

与Chrome不同，在Firefox中，呈现第一行后，列宽似乎并没有保持固定。列宽在整个呈现过程中都是灵活的。

---

Edge

与Chrome相同。

I am trying to put some divs in a grid by explicitly assigning rows, columns, and sizes to the elements and allowing CSS grid to do column and row sizing work using the following CSS.

display: grid;
grid-auto-columns: min-content;

The value min-content is supposed to set columns to be the smallest possible size that fits the content without overflow. However, this is not happening. Even though these elements can all fit in a 350px grid, the third column is too large causing unnecessary whitespace.

Here is an image of what is going on.

And here is the actual code: JSFiddle

function randint(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const children = document.getElementById('parent').children;
const skip = 360 / children.length;
let value = randint(0, 359);
for (let i = 0; i < children.length; i += 1) {
  const elm = children[i];
  elm.style.backgroundColor = `hsl(${value}, 100%, 85%)`;
  value += skip;
  elm.id = "w" + (i + 1);
  const style = window.getComputedStyle(elm);
  elm.innerHTML = `width: ${elm.offsetWidth}px<br \>
  col: ${style.getPropertyValue('grid-column')}<br \>
  row: ${style.getPropertyValue('grid-row')}`;
}

#parent {
  display: grid;
  grid-auto-columns: min-content;
  border: 1px solid black;
  width: 350px;
  font-size: 10pt;
}

#parent>div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
}

#w1 {
  width: 200px;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

#w2 {
  width: 150px;
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

#w3 {
  width: 100px;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#w4 {
  width: 150px;
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

#w5 {
  width: 100px;
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

<div id='parent'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

解决方案

The grid items in the first row create four columns:

#w1 {
  width: 200px;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

#w2 {
  width: 150px;
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

The first item spans two columns (grid-column: 1 / 3).

The second item spans two columns (grid-column: 3 / 5).

So you have a 4-column grid.

---

Chrome

In Chrome, the lengths of the grid items in the first row are divided equally between columns.

So the first two columns are 100px wide:

And the second two columns are 75px wide:

Now you can see what's happening on the second row. Here's the code:

#w3 {
  width: 100px;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#w4 {
  width: 150px;
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

#w5 {
  width: 100px;
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

• The first item (#w3) is 100px wide. That fits perfectly into the first column created by #w1.

• The second item (#w4) is 150px wide. 100px fits perfectly into the second column created by #w1. Another 50px extends into the third column, which was created by #w2 and is 75px wide. That leaves a 25px gap, representing leftover space in the third column.

• The third item (#w5) is 100px wide. But since it starts at the fourth column, which is 75px wide, the remaining 25px overflows the container.

Bottom line: In Chrome, the width of the columns are fixed once the first row is rendered. Grid items in subsequent rows respect the column widths established in the first row.

---

Firefox

Unlike in Chrome, in Firefox it appears that column widths don't remain fixed after rendering the first row. Column widths are flexible throughout the rendering process.

---

Edge

Same as Chrome.

这篇关于CSS网格最小内容不适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！