dynamic grid that stretches to fill the a certain size

body {
  margin-top: 75px;
  /* 50px is the height of the navbar - change this if the navbarn height changes */
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item {
  margin-bottom: 1px;
  margin-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}

footer {
  margin: 50px 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Portfolio</title>

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="css/4-col-portfolio.css">
</head>

<body>

  <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#about">About</a>
          </li>
          <li><a href="#services">Services</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <div class="container">

    <div class="row">

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

    </div>

    <div class="row">

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

    </div>

    <div class="row">

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300"">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

    </div>

    <hr>

  </div>
  <!-- /.container -->

  <div class="container">

    <hr>

    <footer>
      <div class="row">
        <div class="col-lg-12">
          <p>Copyright &copy; Company 2021</p>
        </div>
      </div>
    </footer>

  </div>
  <!-- /.container -->

  <!-- JavaScript -->
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/bootstrap.js"></script>

</body>

</html>