title: How do I make my grid items(boxes with content in them) responsive using bootstrap 5?
body: <p>I am working on a website that has a filter section and a list of offerings in its main body section.</p>
  <p>I want the list of offerings to be setup like how YouTube videos are set up on its homepage. When you change the size the box size changes accordingly while still ensuring that the content looks neat.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.filter{
      height: 300px;
      width: 200px; 
      background-color: pink;
  }
  .card{
      width: 300px;
      height: 370px;
      background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-lg-3 col-md-3 col-xs-10"&gt;
                &lt;div class="col-md"&gt;
                    &lt;div class="filter"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-9 col-md-9 col-xs-10"&gt;
                &lt;div class="row d-grid gap-3"&gt;
                    &lt;div class="p-2 col-lg-4 col-md-4"&gt;
                        &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="p-2 col-lg-4 col-md-4"&gt;
                        &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="p-2 col-lg-4 col-md-4"&gt;
                        &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="p-2 col-lg-4 col-md-4"&gt;
                      &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 card"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>