<!-- 
Sources:
 https://unsplash.com/photos/Uhtx0dDtw9M
https://unsplash.com/photos/g0TUQ7k_mUw
https://unsplash.com/photos/VjpcqSRNiSg
https://unsplash.com/photos/zaXHqMItpcc
-->
<html>
  <body>
    <h1>Try and change the view</h1>
    <div class="gallery">
       <div>
         <img class="item" src="https://images.unsplash.com/photo-1594978081989-0bdab99e1c1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" />
        <img class="item" src="https://images.unsplash.com/photo-1594976382948-12e3439721b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"/>
        </div>
      <div>
        <img class="item" src="https://images.unsplash.com/photo-1594953361908-56e73d769651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80" />
      <img class="item" src="https://images.unsplash.com/photo-1594875895095-21c70556f32f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80"/>
      </div>
    </div>
  </body>
</html>
h1  {
  text-align: center;
}
.gallery {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.item {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.