CSS Grid: collapse width of just 1 column - html

Question

I have a grid with 3 columns: I need the first 1 column to always take the smallest amount of space possible, so the second column is tight with the text. I also need to cover a situation where the text of the first column can be huge:
Here I want the CSS to be exactly as is, since it's perfect. The CSS is really simple:
.container {
display: grid;
}
.children {
grid-row: 1;
}
How can I achieve the desired result with css grid?
Codepen link for minimal case: https://codepen.io/ilia-reingold/pen/RwrdELR
Update: adding code ->
.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>

Answer 1

You can achieve that by using grid-template-columns property.
.container {
display: grid;
grid-template-columns:20% 40% 40%; //It's just a hit, try on your own
}

Answer 2

You can add this to your CSS
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Result: