<div class="wrapper">
  <header class="header">Airbnb</header>
    
  <article class="content">
    
     <div class="panel">
      <img class="panel-img" src="https://a0.muscache.com/im/pictures/10356334/a831e142_original.jpg?aki_policy=large" />
      <span class="panel-title">I SETTE CONI - TRULLO EDERA</span>
      <span class="panel-subtitle">Entire house 2 beds</span>
    </div>
    
     <div class="panel">
      <img class="panel-img" src="https://a0.muscache.com/im/pictures/15273358/d7329e9a_original.jpg?aki_policy=large" />
      <span class="panel-title">I SETTE CONI - TRULLO EDERA</span>
      <span class="panel-subtitle">Entire house 2 beds</span>
    </div>
    
    <div class="panel">
      <img class="panel-img" src="https://a0.muscache.com/im/pictures/7cc3c855-f90e-4d0f-9b13-3b5c2a3c4bad.jpg?aki_policy=large" />
      <span class="panel-title">I SETTE CONI - TRULLO EDERA</span>
      <span class="panel-subtitle">Entire house 2 beds</span>
    </div>
    
        <div class="panel">
      <img class="panel-img" src="https://a0.muscache.com/im/pictures/10356334/a831e142_original.jpg?aki_policy=large" />
      <span class="panel-title">I SETTE CONI - TRULLO EDERA</span>
      <span class="panel-subtitle">Entire house 2 beds</span>
    </div>
    
     <div class="panel">
      <img class="panel-img" src="https://a0.muscache.com/im/pictures/15273358/d7329e9a_original.jpg?aki_policy=large" />
      <span class="panel-title">I SETTE CONI - TRULLO EDERA</span>
      <span class="panel-subtitle">Entire house 2 beds</span>
    </div>
    
    <div class="panel">
      <img class="panel-img" src="https://a0.muscache.com/im/pictures/7cc3c855-f90e-4d0f-9b13-3b5c2a3c4bad.jpg?aki_policy=large" />
      <span class="panel-title">I SETTE CONI - TRULLO EDERA</span>
      <span class="panel-subtitle">Entire house 2 beds</span>
    </div>
    
  </article>
  
  <aside class="sidebar">Sidebar - Map</aside>
  
</div>
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: Courier, 'sans-serif';
  background-color: #fff;
  color: #141414;
}

h1, p {
  margin: 0 0 1em 0;
}

.wrapper {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 65% 35%;
  grid-gap: 16px;
}

.wrapper > * {
  background-color: #fafafa;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}

.header,
.sidebar {
  padding: 24px;
}

.header, .footer {
  grid-column: 1 / -1;
  clear: both;
}

.content {
  padding: 8px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) ;
  grid-auto-rows: minmax(264px, auto);
  grid-gap: 16px;
}

.panel {
  margin-left: 5px;
  margin-right: 5px;
}

.panel-img {
  width: 100%;
  height: 80%;
}

@media (max-width: 1100px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    display: none;
  }
  
  .content {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
    grid-auto-rows: minmax(300px, auto);
  }  
}

@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.