.basic grid{
  display: grid;
  gap: 1rem;
  
  /* 1 too skinny, too much code */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  
  /* 2 cleaner code */
  grid-template-columns: repeat(12, 1fr);
  
  /* 3 better sizing but overflows*/
  grid-template-columns: repeat(12, minmax(240px, 1fr));
  //doesnt get smaller than 240px but get as big as 1fr
  
  /* 4 final*/
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  //works also with auto-fill
  
}