<section class='just-some-section'>
  
  <ul class='product-list'>
    <li class='product'>One</li>
    
    <li class='product'>Two</li>
    
    <li class='product'>Three</li>
    
    <li class='product'>Four</li>
    
    <li class='product'>Five</li>
    
    <li class='product'>Six</li>
    
    <li class='product'>Seven</li>
    
    <li class='product'>Eight</li>
    
    <li class='product'>Nine</li>
    
    <li class='product'>Ten</li>
  </ul>
  
</section>
/* reset ^ included */
* {
  box-sizing: border-box;
}


.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

/* 
  "CSS grid layout" is an ultra new (as of 2021) 

  in this case, when you set a parent to display: grid
      (just like any other display type)
      it makes available a set of unique properties
      
      this creates some columns
        it repeats this pattern
          tries to fill the space
            witn the children being a minimum of 200px
              and a maximim of 1fr


      the 'fr' unit represents a fraction of 
      the leftover space in the grid container

  Grid (if you ask us) - is super confusing... but - we'll talk A LOT about how to use it in an understandable way....... LATER....
  
  FOR NOW -- just use it for "grids" - just like this - and forget about learning the rest.

  This is one of the very few times we thing you should just copy and paste this code - and not thinking about it.
*/







































.product-list {
  background-color: #aadee9;
  padding: 20px;
}

.product {
  background-color: rgba(255, 255, 255, .6);
  padding: 20px;
  min-height: 80px;
  border-radius: 6px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.