A certain number of divs in 1 row

Hello, i remember seeing a video for kevin doing smth with grid where had a stack of divs as a grid and their width grew and shrunk for a small amount before wrapping to the next row, how do i acheive that, like i need to have whatever the width can take but also keep all the divs with the same width in 1 row, if possible in tailwind, also if someone can tell me how can i have all the divs have the same dimensions. thnx in advance
1 Reply
MarkBoots
MarkBoots8mo ago
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
here it will fill the row with as much as column as fit, columns will be sized evenly (1fr) if the columns gets smaller than 200px it will go to the next row. if there is only space for 1 col, than it will take 100% width; example: https://codepen.io/MarkBoots/pen/ZEwQOJb here the tailwind class
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(200px,100%),1fr))]">
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(200px,100%),1fr))]">
example: https://play.tailwindcss.com/TzsYpQGsTx if you want all rows to have the same height, you can add the class auto-rows-fr