CSS Layout (picks)

Grid

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

• repeat( how-many-times , column-size )
  
• auto-fill/auto-fit keyword as first value of repeat() (instead of int): place as many items as possible (defined by their (min-)width) on the row, otherwise wrap them on the next row.
  • fill: let items grow in with to fill up the available space
  • fit: use (min-)widht of item, remaining space will be left as white space at the end of the row
• minmax( min , max ) as second repeat() value
  • item min with in pixel as min-value: «don't let the item get smaller than this»
  • 1fr as max-value: «let item be max 1 fraction of the available space», together with the auto-fill keyword this means: «let item be as big as possible within the condition of fitting as many items on the row as possible»
    

Demo: