在 CSS Grid 中将列宽设置为内容长度答案

【问题标题】：Set column width to content length in CSS Grid在 CSS Grid 中将列宽设置为内容长度
【发布时间】：2018-04-20 15:19:59
【问题描述】：

我查看了文档，但没有找到这样的属性。我想使用 css 网格将一列中的所有单元格调整到其内容宽度。

对于第一种情况，我应该将此属性应用于容器：grid-template-columns: auto auto;

但是第二种情况我该怎么办呢？

【问题讨论】：

你试过grid-template-columns: min-content auto吗？
@Michael_B 谢谢，它对我有用！ :) 很奇怪，在很多 CSS 网格指南中都没有关于这个道具的信息......
min-content 将在空格后换行任何文本，因此white-space: nowrap; 可以用作修复
@besthost 可以使用max-content 来防止包装

标签： css css-grid

【解决方案1】：

要使所有列“收缩到适合”，请使用内联级网格容器：

article {
  display: inline-grid;
  grid-template-columns: auto auto;
}

/* non-essential demo styles */
article { background-color: black; border: 1px solid black; }
section { background-color: white; border: 1px solid black; }

<article>
  <section>content</section>
  <section>content</section>
  <section>cell3</section>
  <section>cell4</section>
</article>

要使一个列“缩小以适应”，请使用 min-content:

article {
  display: grid;
  grid-template-columns: min-content auto;
}

/* non-essential demo styles */
article { background-color: black; border: 1px solid black; }
section { background-color: white; border: 1px solid black; }

<article>
  <section>content</section>
  <section>content</section>
  <section>cell3</section>
  <section>cell4</section>
</article>

但是auto 和1fr 也可以工作，因为fr 会占用行上的所有可用空间，并尽可能折叠另一列：

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

/* non-essential demo styles */
article { background-color: black; border: 1px solid black; }
section { background-color: white; border: 1px solid black; }

<article>
  <section>content</section>
  <section>content</section>
  <section>cell3</section>
  <section>cell4</section>
</article>

规范中的更多信息：

7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

【讨论】：

这个grid-template-columns: auto max-content; 为我工作。

【解决方案2】：

在网格容器上设置以下内容：

grid-template-columns: auto 1fr;

这会将第一列的宽度设置为等于该列中最宽项的宽度，并将第二列的宽度设置为剩余的宽度网格。

要右对齐第二列的内容，我们可以简单地使用text-align: right

span:nth-child(2n) {
  text-align: right;
}

div {
  display: grid;
  grid-template-columns: auto 1fr;
}
span {
  padding: 0.5em;
}
span:nth-child(2n) {
  text-align: right;
}
span:nth-child(1) {
  background-color: beige; /* colors for demo */
}
span:nth-child(2) {
  background-color: wheat;
}
span:nth-child(3) {
  background-color: lightgreen;
}
span:nth-child(4) {
  background-color: salmon;
}

<div>
  <span>some content here</span>
  <span>content</span>
  <span>cell3</span>
  <span>cell4</span>
</div>

注意：使用min-content 设置列宽有点激进:) 并将列宽设置为最大单词的宽度列。

div {
  display: grid;
  grid-template-columns: min-content auto;
}
span {
  padding: 0.5em;
}
span:nth-child(2n) {
  text-align: right;
}
span:nth-child(1) {
  background-color: beige;
}
span:nth-child(2) {
  background-color: wheat;
}
span:nth-child(3) {
  background-color: lightgreen;
}
span:nth-child(4) {
  background-color: salmon;
}

<div>
  <span>some content here</span>
  <span>content</span>
  <span>cell3</span>
  <span>cell4</span>
</div>

【讨论】：

这是唯一对我有用的（在行上）。问题是浏览器选择了它旁边重叠列的最小内容。