Make all grid cells have the width of the widest cell - css

Question

My first question here and your help would be much appreciated
I have a ul width display: grid inside a div with overflow: hidden.
The ul's purpose is to function as a slidable element, so its width is not explicitly specified, but rather, defined by its contents. Each li element inside the list contains text of variable length, which should not be truncated nor break on a 2nd line.
The li count inside the list may vary, from 4 to up to 12 elements.
My question is how can I create a grid that all its cells have the width of the widest li? (which, in turn, is defined by the longest text)
Please keep in mind that the grid is always going to have 2 rows
Here is a simplified version of what I am trying to accomplish:
.container {
overflow: hidden;
background: #fafafa;
width: 760px;
margin: 0 auto;
padding: 24px;
}
ul {
overflow: auto;
list-style: none;
padding: 0;
display: grid;
grid-gap: 8px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
li {
border: 1px solid #eee;
border-radius: 20px;
padding-inline: 12px;
display: flex;
gap: 4px;
align-items: center;
}
a {
white-space: nowrap;
}
<div class='container'>
<ul>
<li>
<img src='https://unsplash.it/50/50'>
<a>text 1</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 2</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 3</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Fourth text</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Test 5 is is a huge text and all other cells should follow its size</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 6</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>This is also a large text</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 8</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 9</a>
</li>
</ul>
</div>

Answer 1

.container {
overflow: hidden;
background: #fafafa;
width: 760px;
margin: 0 auto;
padding: 24px;
}
ul {
overflow: auto;
list-style: none;
padding: 0;
display: grid;
grid-gap: 8px;
grid-auto-flow: column;
grid-templates-column: auto auto auto auto;
grid-template-rows: auto auto;
}
li {
border: 1px solid #eee;
border-radius: 20px;
padding-inline: 12px;
display: flex;
gap: 4px;
align-items: center;
}
a {
white-space: nowrap;
}
<div class='container'>
<ul>
<li>
<img src='https://unsplash.it/50/50'>
<a>text 1</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 2</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 3</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Fourth text</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Test 5 is is a huge text and all other cells should follow its size</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 6</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>This is also a large text</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 8</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 9</a>
</li>
</ul>
</div>
.container {
overflow: hidden;
background: #fafafa;
width: 760px;
margin: 0 auto;
padding: 24px;
}
ul {
overflow: auto;
list-style: none;
padding: 0;
display: grid;
grid-gap: 8px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
li {
border: 1px solid #eee;
border-radius: 20px;
padding-inline: 12px;
display: flex;
gap: 4px;
align-items: center;
}
a {
white-space: nowrap;
}
<div class='container'>
<ul>
<li>
<img src='https://unsplash.it/50/50'>
<a>text 1</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 2</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 3</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Fourth text</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Test 5 is is a huge text and all other cells should follow its size</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 6</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>This is also a large text</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 8</a>
</li>
<li>
<img src='https://unsplash.it/50/50'>
<a>Text 9</a>
</li>
</ul>
</div>