如何使 CSS 网格列宽为“最大内容”但不大于 50%答案

【问题标题】：How to make CSS grid column width to be "max-content" but not bigger than 50%如何使 CSS 网格列宽为“最大内容”但不大于 50%
【发布时间】：2022-12-18 11:19:58
【问题描述】：

如何使 CSS 网格列宽为“最大内容”但不大于 50%？所以当单元格内容超过 50% 宽度时，它看起来像这样。

我认为 minmax(max-content, 1fr) 之类的东西应该可以工作，但由于某种原因，1fr 似乎从未被应用过。

.grid {
  display: grid;
}

.grid-1 {
  grid-template-columns: max-content 1fr;
}

.grid-2 {
  grid-template-columns: minmax(max-content, 1fr) 1fr;
}

.grid + .grid {
  margin-top: 20px;
}

.grid-item {
  padding: 16px;
  background: gray;
  border: solid 1px lightgray;
}

.grid-description {
  grid-column-end: 3;
  grid-column-start: 1;
  background: teal;
}

.page {
  width: 100%;
  background: black;
}

<div class="page">
  <div class="grid grid-1">
    <div class="grid-description">Example 1</div>
    <div class="grid-item">User Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
  </div>

  <div class="grid grid-2">
    <div class="grid-description">Example 2</div>
    <div class="grid-item">Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
    <div class="grid-item">Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis</div>
    <div class="grid-item">Software Developer</div>
  </div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

像这样？

.grid {
  display: grid;
}

.grid-1 {
  grid-template-columns: minmax(50%, 1fr) 1fr;
}

.grid-2 {
  grid-template-columns: minmax(50%, 1fr) 1fr;
}

.grid+.grid {
  margin-top: 20px;
}

.grid-item {
  padding: 16px;
  background: gray;
  border: solid 1px lightgray;
}

.grid-description {
  grid-column-end: 3;
  grid-column-start: 1;
  background: teal;
}

.page {
  width: 100%;
  background: black;
}

<div class="page">
  <div class="grid grid-1">
    <div class="grid-description">Example 1</div>
    <div class="grid-item">User Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
  </div>

  <div class="grid grid-2">
    <div class="grid-description">Example 2</div>
    <div class="grid-item">Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
    <div class="grid-item">Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis</div>
    <div class="grid-item">Software Developer</div>
  </div>
</div>

【讨论】：

【解决方案2】：

要将 CSS 网格列的宽度设置为“最大内容”但不大于 50%，可以使用 grid-template-columns 属性和 minmax() 函数。 minmax() 函数有两个参数：列的最小和最大宽度。

以下是如何使用 grid-template-columns 和 minmax() 属性设置网格列宽度的示例：

.grid-container { display: grid; grid-template-columns: minmax(max-content, 50%); }

在此示例中，grid-template-columns 属性设置为 minmax(max-content, 50%)。这指定网格列的宽度应为其内容的最大可能宽度，但不大于网格容器的 50%。

minmax() 函数用于设置网格列的最小和最大宽度。 max-content 关键字用于最小宽度，它告诉浏览器使用列内容的最大可能宽度作为最小宽度。最大宽度设置为 50%，这意味着列的宽度不会超过网格容器的 50%。

【讨论】：