Responsive grid with CSS Grids

Responsive grid with CSS Grids

by zerrax

HTML

<ul>
  <li style=""> 
    <div ><div>efrty <span></span></div></div>
    
  </li>
  <li>
  <div style="background-size: cover;background:url(https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg)no-repeat;
    background-size: 100%;border-radius: 3px;"></div>
  </li>
  <li>
    <div style="background-size: cover;background:url(https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg)no-repeat;
    background-size: 100%;border-radius: 3px;"></div>
  </li>
  <li>
    <div style="background-size: cover;background:url(https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg)no-repeat;
    background-size: 100%;border-radius: 3px;"></div>
  </li>
  <li>
    <div style="background-size: cover;background:url(https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg)no-repeat;
    background-size: 100%;border-radius: 3px;"></div>
  </li>
  <li>
    <div style="background-size: cover;background:url(https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg)no-repeat;
    background-size: 100%;border-radius: 3px;"></div>
  </li>
</ul>

<div class="info">Resize this panel to see grids respond</div>

<div class="item"> <a href="https://www.serietvu.club/riverdale-serie-tv-11/" data-src="https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg" class="owl-lazy inner" style="height: 144.6px; background-image: url(&quot;https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg&quot;); opacity: 1;"> <span class="brand"></span><div><div class="title">Riverdale <small>(3x03 Ita)</small> <br><div class="stars" title="Voto: 3.5/5"><div class="fill" style="width: 70%"></div></div></div> <span class="middle-icon"></span></div> </a><a href="https://www.serietvu.club/fdh/index.php?u=cml2ZXJkYWxlLXNlcmllLXR2LTEx" target="__blank" class="ad"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Guarda ora</a></div>

CSS

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

ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 40px;

}

li {
  border-radius: 3px;
  font-size: 14px;
  height:250px;
  position:relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background:url(https://www.serietvu.club/wp-content/uploads/2017/02/riverdale-orr.jpg);
      background-size: 100%;
}
li > div{
  position: relative;
  display:block;
  height: 100%;
  width:100%;
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
li > div 
li div > div{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(0,0,0,0.6);
  border-radius: 5px;
}
li:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}
@media screen and (max-width: 800px) {
    ul {
  display: grid;
  grid-template-columns: auto auto;
}
}
::-webkit-scrollbar {
  width: 5px;
}
 
::-webkit-scrollbar-track {
  background: #ddd;
}
 
::-webkit-scrollbar-thumb {
  background: #666; 
}

::-webkit-scrollbar {
  width: 5px;
}
 
::-webkit-scrollbar-thumb {
  background: #666; 
}

::-webkit-scrollbar {
  width: 5px;
}
 
::-webkit-scrollbar-thumb {
  background: #ddd; 
}

::-webkit-scrollbar-track {
  background: #666; 
}

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 20px;
}

::-webkit-scrollbar {
  width: 15px;
}
 
::-webkit-scrollbar-thumb {
  background: #666;
}

::-webkit-scrollbar-track {
  background: #ddd;
}

::-webkit-scrollbar-button {
  background: #666;
  height: 15px;
  border-radius: 50%;
}