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

Question

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

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

但是我应该为第二种情况做些什么呢？

Answer 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的{​​{1}}也会有效，因为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; }

规范中的更多信息：

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

Answer 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>

NB：使用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>