I am currently utilizing CSS Grid to showcase various tags. If a tag happens to be quite large, with a width exceeding 150px, I would ideally like that specific item to expand across multiple columns as necessary. For instance, in the visual representation, I envision the red tag extending into two columns so that the text remains on a single line.
Is there a way to achieve this effect without assigning a dedicated class to the target element? Given that I am iterating through an array in React to create each of these divs, it seems impractical to apply a class solely to that element.
https://i.stack.imgur.com/PILvY.png
index.js
<div className={styles.container}>
<>
{tags.map(tag => {
return <TagBlock tag={tag} />
})}
</>
</div>
style.css
.container {
margin: 30px auto;
width: 90%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, auto));
grid-gap: 20px;
}