reactjs - Automatically span item width in CSS Grid

Question

I am using CSS Grid to display some tags. If a tag is large (ie. it's width is more than 150px), I would like that item to span into more columns as needed. For example, in the image I would like the red tag to span into two columns so that the text remains in one line.

Is it possible to do something like that without adding a specific class to the target element? I am mapping through an array in React to generate each of these divs so it won't be possible to add a class to that element only.

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;                                                       
}