Responsive grid with CSS Grids

Responsive grid with CSS Grids

by Jay Angelo Valmocina

HTML

<section>
  <div>
    <div class="card-epi">
          <h3>Episode 1</h3>
          <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fstephon.sample.3%2Fvideos%2F1978853982375834%2F&show_text=0&width=560"  width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true" ></iframe>
        </div>
  </div>
  <div> <div class="card-epi">
          <h3>Episode 2</h3>
          <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FWOWsaMAGIC%2Fvideos%2F211324626274224%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
        </div>
    
  </div>
  <div> <div class="card-epi">
          <h3>Episode 3</h3>
          <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FUpdateAnimeU%2Fvideos%2F1772174676411226%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
        </div>
    
  </div>
</section>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

.card-epi {
  margin: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
  border-radius: 2pt;
  margin-bottom: 0.5em;
  background-color: white;
}

.card-epi {
  width: 100%;
  height: 50vw;
  
}

iframe{
  width: inherit;
  height: inherit;
}


section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 8px;
}