title: How to show some items in css grid, until see more button is pressed?
body: <p>I have a css grid with multiple items, each row has three or four grid areas.  How do I display one row (or first three or four items), followed by a "see more" button?  That button would then show the next set of items, followed by the "see more" button and so on.</p>
  
  <p>Currently I am only able to load all of the grid items at once as a full grid.</p>
  
  <p>Here is the css for the grid:</p>
  
  <pre><code>.grid-rp{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 2em;
    margin: 0;
  }
  </code></pre>
  
  <p>Here is the grid content for two items as an example:</p>
  
  <pre><code>&lt;div class="grid-rp"&gt;
    &lt;div class="rp-details"&gt;
      &lt;a href="#" target="_blank"&gt;&lt;h3&gt;Title&lt;/h3&gt;&lt;/a&gt;
      &lt;p&gt;content goes here&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;button class="show-more"&gt;Show More&lt;/button&gt;
  
    &lt;div class="rp-details"&gt;
      &lt;a href="#" target="_blank"&gt;&lt;h3&gt;Title&lt;/h3&gt;&lt;/a&gt;
      &lt;p&gt;content goes here&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need help with the JS for the button.</p>
  
  <p>I would like to click on the Load More button and have the next content area be shown.  Until the click that content should be hidden.</p>