Responsive grid with CSS Grids

Responsive grid with CSS Grids

by zerrax

HTML

<div class="carousel" >
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li class="hid">Agtrgtrtrhtrhtrh</li>
  <li class="hid">Bdddd</li>
  <li class="hid">Cddddd</li>
</ul>
	<div class="col-md-3 text-right">
			<button onclick="pref(this)"  id="ct-js-district-calendar--prev" type="button" class="slick-arrow next"><img src="https://www.solodev.com/assets/news-slider/arrow-prev.jpg" alt="Previous"></button>
			<button onclick="next(this)" id="ct-js-district-calendar--next" type="button" class="slick-arrow next"><img src="https://www.solodev.com/assets/news-slider/arrow-next.jpg" alt="Next"></button>
		</div>
</div>

CSS

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

ul {
  display: flex;
padding:20px;
  grid-gap: 10px;
}

li {
  flex: 1;
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
    float:left;
    text-align: center;
    border: 2px solid #FFF;
    background: #DDD;
      border-radius: 3px;
  font-size: 14px;
  height:200px;
  position:relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image:url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg);
      background-size: 100% 100%;
  -webkit-transition: transform 0.5s; /* Safari */
  transition: transform 0.5s;
  color:#fff;
}
li:hover {
  flex: 3;
  z-index: 1;
height:250px;
 //grid-column: 1;
 margin-top:-25px;

 // -webkit-transform: translateZ(0) scale(1.2,1.2);
//transform: translateZ(0) scale(1.2,1.2);


}
.hid {display:none;}
.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}

JavaScript

function next(a)
{

	var el = a.parentElement.parentElement.childNodes;
  var i = 0;
  var e = 0;
  var bool = false;
  var bool2 = false;
el.forEach(function(element)
{
  if(element.nodeName == "UL")
  {
		var arr = [];
    element.childNodes.forEach(function(elements)
    {
      if(elements.nodeName == "LI")
      {
        arr.push(elements);
      }
		});
    for(var r = 0; r < arr.length; r++)
    {
      if(arr[r].className == "hid")
      {
      if(arr[r+1].className != "hid")
      {
      	if(arr[r++].className != "hid")
      	{
      	}
        else
      	{
        
        }
      }
      else
      {
      
        break;
      }
        
        
      }
    } 
		throw new Error("");
  }
  else
  {
  	
  }
  i++;
});

}
function prev(a)
{
	
}