title: Responsive Card Grid in React
body: <p>I'm new to the front-end world, and I'm trying to make a &quot;responsive&quot; card grid, meaning I want to place an unknown number of cards inside a grid and make the text and layout fit
  nicely. I'm using <strong>react-bootrap</strong> Card and CardGroup, this is what I got so far.</p>
  <p><a href="https://i.stack.imgur.com/I0qsk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I0qsk.png" alt="CardGrid" /></a></p>
  <p>If I use too many Cards, they get horizontally stretched and don't create new rows for a better layout, I'd expect to have a min-width so if it doesn't fit it creates a new row, but I'm not sure how to get this done or if it's the best practice.</p>
  <p>Sorry if some of the terms are incorrect; I just started learning as mentioned.</p>
  <p>Here is my GridCard.js code</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import {Card, CardGroup, Button} from &quot;react-bootstrap&quot;;
  import &quot;./CardGrid.css&quot;
  
  const CardGrid = () =&gt; {
  
      return (
          &lt;CardGroup&gt;
              {Array.from({ length: 10 }).map((_, index) =&gt; (
                      &lt;Card className={&quot;card-grid&quot;} key={index}&gt;
                          &lt;Card.Img className={&quot;card-img&quot;} variant=&quot;bottom&quot; src={&quot;https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg&quot;}/&gt;
                          &lt;Card.Body&gt;
                              &lt;Card.Title&gt;&lt;strong&gt;Lorem ipsum dolor sit amet&lt;/strong&gt;&lt;/Card.Title&gt;
                              &lt;Card.Text&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores harum, illum.
                                      Accusamus assumenda commodi consequuntur cumque, delectus deleniti dolorum eum illum
                                      nam nostrum provident quaerat quisquam quos reiciendis, reprehenderit voluptas!&lt;/p&gt;
                              &lt;/Card.Text&gt;
                              &lt;Button variant=&quot;primary&quot;
                                      href=&quot;www.google.com&quot;
                                      rel={&quot;noopener noreferrer&quot;}&gt;
                                  Learn More
                              &lt;/Button&gt;
                          &lt;/Card.Body&gt;
                      &lt;/Card&gt;
              ))}
          &lt;/CardGroup&gt;
      )
  
  }
  
  export default CardGrid
  
  </code></pre>
  <p>and my CardGrid.css</p>
  <pre class="lang-css prettyprint-override"><code>.card-group {
      justify-content: center;
  }
  
  .card-grid, .card {
      padding: 5px 5px !important;
      height: auto !important;
      justify-content: center;
      margin: 1rem;
  }
  
  .card-body {
      background-color: #F6F5F5;
      margin: 0;
  }
  
  .card-img,
  .card-img-top,
  .card-img-bottom {
      height: 10rem;
      width: auto;
      align-content: flex-start;
  }
  
  .card-text {
      height: fit-content;
      margin-bottom: 2rem;
  }
  
  .btn, .btn-primary {
      position: absolute;
      bottom: 5px;
      color: #263238;
      overflow: auto;
  }
  
  </code></pre>