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

PIoneer_2 · Accepted Answer · 2021-07-10 09:55:02Z

1

Don't know a way to implement a gradual column width increase via CSS only. A JS logic will be required to set "how many columns it should take". Then one of the following cases.

explicitly style for the "wide" column:

grid-column: span X;

where X is how many columns should take your element.

Set predefined classes (like at Bootstrap: col-1, col-2), then apply them.

If a column could have any width, then I would recommend you to use a flexbox with wrapping. Kind of:

.container {
   margin: 30px auto;
   width: 90%;                                                           
   /*added properties below*/
   display: flex;                                                        
   flex-wrap: wrap;
   align-content: flex-start;
}
/*TagBlock base style that grid generated on its own*/
TagBlock {
  margin: 25px;
  min-height: 120px;
  min-width: 120px;
}

Hope, this will help a little.

edited Jul 10, 2021 at 9:55

answered Jul 9, 2021 at 13:44

PIoneer_2

5564 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Automatically span item width in CSS Grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related