W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>W3.CSS Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>

<section id="about" class="w3-container w3-padding-32">

<h2 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h2>

<div class="w3-grid w3-grayscale" style="grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px">
  <div>
    <img src="/w3images/team2.jpg" alt="John" style="width:100%">
    <h3>John Doe</h3>
    <p class="w3-opacity">CEO & Founder</p>
    <p>Phasellus eget enim eu lectus faucibus vestibulum.</p>
    <p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
  </div>

<div>
    <img src="/w3images/team1.jpg" alt="Jane" style="width:100%">
    <h3>Jane Doe</h3>
    <p class="w3-opacity">Architect</p>
    <p>Phasellus eget enim eu lectus faucibus vestibulum.</p>
    <p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
  </div>

<div>
    <img src="/w3images/team3.jpg" alt="Mike" style="width:100%">
    <h3>Mike Ross</h3>
    <p class="w3-opacity">Architect</p>
    <p>Phasellus eget enim eu lectus faucibus vestibulum.</p>
    <p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
  </div>
  
  <div>
    <img src="/w3images/team4.jpg" alt="Dan" style="width:100%">
    <h3>Dan Star</h3>
    <p class="w3-opacity">Architect</p>
    <p>Phasellus eget enim eu lectus faucibus vestibulum.</p>
    <p><button class="w3-button w3-light-grey w3-block">Contact</button></p>
  </div>
</div>

</section>

</body>
</html>