CSS Grid：折叠宽度仅为 1 列答案

【问题标题】：CSS Grid: collapse width of just 1 columnCSS Grid：折叠宽度仅为 1 列
【发布时间】：2020-07-24 18:45:31
【问题描述】：

我有一个包含 3 列的网格：我需要前 1 列始终占用尽可能少的空间，因此第二列与文本紧密相关。我还需要介绍第一列文本可能很大的情况：

在这里，我希望 CSS 保持原样，因为它是完美的。 CSS 真的很简单：

.container {
  display: grid;
}

.children {
 grid-row: 1;
}

如何使用 css 网格达到预期的效果？

最小案例的 Codepen 链接：https://codepen.io/ilia-reingold/pen/RwrdELR

更新：添加代码 ->

.margin-top {
  margin-top: 1rem;
}

.row {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
}

.title-container {
  display: grid;
  // grid-template-columns: auto 10% 10%; 
}

.title {
  grid-row: 1;
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: #000000;
}

.container {
  grid-row: 1;
}

.buttons {
  grid-row: 1;
}

.description {
  font-family: Rubik;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: #404A56;
}

.end {
  justify-content: flex-end;
}

.container {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0 0.5rem;
  align-items: center;
}

<div data-v-31045a46="" class="pagetop row margin-top">
    <div data-v-31045a46="" class="title-container row">
        <div data-v-31045a46="" class="text-ellipsis title"> Hardik's Favourite </div>
        <div data-v-52c45aaf="" data-v-31045a46="" class="container">
            <div data-v-52c45aaf="" class="status-button read-only">
                <svg data-v-52c45aaf="" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7.5H14C15.1 7.5 16 8.4 16 9.5V19.5C16 20.6 15.1 21.5 14 21.5H2C0.9 21.5 0 20.6 0 19.5V9.5C0 8.4 0.9 7.5 2 7.5H3V5.5C3 2.74 5.24 0.5 8 0.5C10.76 0.5 13 2.74 13 5.5V7.5ZM8 2.5C6.34 2.5 5 3.84 5 5.5V7.5H11V5.5C11 3.84 9.66 2.5 8 2.5ZM2 19.5V9.5H14V19.5H2ZM10 14.5C10 15.6 9.1 16.5 8 16.5C6.9 16.5 6 15.6 6 14.5C6 13.4 6.9 12.5 8 12.5C9.1 12.5 10 13.4 10 14.5Z" fill="black" fill-opacity="0.54"></path>
                </svg>
                <span data-v-52c45aaf="">Read-only</span>
            </div>
            <div data-v-52c45aaf="" class="status-button shared pointer">
                <svg data-v-52c45aaf="" width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd" clip-rule="evenodd" d="M7 7C8.93 7 10.5 5.43 10.5 3.5C10.5 1.57 8.93 0 7 0C5.07 0 3.5 1.57 3.5 3.5C3.5 5.43 5.07 7 7 7ZM0 12.25C0 9.92 4.66 8.75 7 8.75C9.34 8.75 14 9.92 14 12.25V14H0V12.25ZM7 10.75C5.21 10.75 3.18 11.42 2.34 12H11.66C10.82 11.42 8.79 10.75 7 10.75ZM8.5 3.5C8.5 2.67 7.83 2 7 2C6.17 2 5.5 2.67 5.5 3.5C5.5 4.33 6.17 5 7 5C7.83 5 8.5 4.33 8.5 3.5ZM14.04 8.81C15.2 9.65 16 10.77 16 12.25V14H20V12.25C20 10.23 16.5 9.08 14.04 8.81ZM16.5 3.5C16.5 5.43 14.93 7 13 7C12.46 7 11.96 6.87 11.5 6.65C12.13 5.76 12.5 4.67 12.5 3.5C12.5 2.33 12.13 1.24 11.5 0.35C11.96 0.13 12.46 0 13 0C14.93 0 16.5 1.57 16.5 3.5Z" fill="#6E6F73"></path>
                </svg>
                <span data-v-52c45aaf="">Shared with team</span>
            </div>
        </div>
        <div data-v-31045a46="" class="buttons row end">
            <button data-v-5ea9ad22="" data-v-31045a46="" data-testid="button" class="button">
                <div data-v-5ea9ad22="" class="centered">
                   <svg data-v-31045a46="" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-5ea9ad22="">
                      <rect x="7" y="7" width="14" height="14" rx="2" stroke="black" stroke-width="2"></rect>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3 2H13C13.5523 2 14 2.44772 14 3V6H16V3C16 1.34315 14.6569 0 13 0H3C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H6V14H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2Z" fill="black"></path>
                   </svg>
                   <span data-v-5ea9ad22=""> Copy </span>
                </div>
            </button>
            <button data-v-5ea9ad22="" data-v-31045a46="" data-testid="button" class="disabled button">
        <div data-v-5ea9ad22="" class="centered">
           <svg data-v-31045a46="" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-5ea9ad22="">
              <path d="M13.7728 4.22774L8.96019 0.15672C8.53894 -0.199663 7.875 0.0896491 7.875 0.643255V2.78753C3.4828 2.83679 0 3.6991 0 7.77658C0 9.42231 1.08229 11.0527 2.27864 11.9051C2.65196 12.1711 3.18402 11.8373 3.04637 11.4061C1.80649 7.52179 3.63445 6.4906 7.875 6.43084V8.7857C7.875 9.34016 8.53946 9.62819 8.96019 9.27223L13.7728 5.20081C14.0755 4.94469 14.0759 4.48421 13.7728 4.22774Z" fill="#8d8f93"></path>
           </svg>
           <span data-v-5ea9ad22=""> Share </span>
        </div>
     </button>
            <div data-v-31045a46="" role="listbox" tabindex="0" class="ui dropdown dropdown icon disabled-grey-btn" compact="compact">
                <i aria-hidden="true" class="ellipsis horizontal icon"></i><span class="sizer"></span>
                <div tabindex="-1" class="menu transition"></div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

我可能会有所帮助，但我需要更准确地解释所需的行为和布局到底是什么。另外，请将您的 HTML 结构显示为代码，而不是图像。
我已经添加了整个组件。
请仅显示您的 Chrome 开发工具显示给您的渲染 HTML，以及您的 CSS。基本上，在这里创建一个可运行的 sn-p。
我已经分别添加了html + css，也尝试添加了codepen。
但我需要更准确地解释究竟所需的行为和布局是什么

标签： html css css-grid

【解决方案1】：

您可以通过使用grid-template-columns 属性来实现。 .container {

 display: grid;
 grid-template-columns:20% 40% 40%; //It's just a hit, try on your own
}

【讨论】：

只有在文本很小的时候才需要它来折叠内容。当文本很大时（在第二个示例中），我希望它占据最大的空间。在这种情况下，硬编码百分比不起作用。
好吧，伙计，我做到了。使用了一点 js，我将代码留在 jsfiddle 上，检查一下，它工作得很好。jsfiddle.net/63bkf4cd/2。希望对您有所帮助，如果您认为有帮助，请点赞。

【解决方案2】：

您可以将其添加到您的 CSS 中

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

结果：

【讨论】：