Responsive grid with CSS Grids

Responsive grid with CSS Grids

by zerrax

HTML

<nav>
  <input type="checkbox" id="nav" class="hidden"/>
  <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
  <a>Easy Stream</a>
  <a><from><input src="" type="text"></from></a>
  <div class="nav-container">
  <a>Easy Stream</a>
  <a><from><input src="" type="text"></from></a>
    <ul>
      <li><a href="#">Shows</a></li>
      <li><a href="#">Movies</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Vip</a></li>
    </ul>
  </div>
</nav>
<div class="page">
<div   onscroll="loadNewpages(this)" class="p">
<div  class="gallery">
    <a class="imageCard">
        <img src="https://upload.megastreaming.ws/2019/01/4357307dfdfd456e2f382bc90e4603d6.jpeg" />
        <span class="title">NCIS : Los Angeles – Saison 10</span>
         <div class="back">
      <p>
      Deux agents du NCIS (Naval Criminal Investigative Service) opérent dans la division OPS du bureau de Los-Angeles. Leur mission : déjouer les attentats et autres menaces terroristes par tout les moyens
      </p>
      <button>
      Watch
      </button>
      </div>
    </a>
    <a class="imageCard">
        <img src="https://upload.megastreaming.ws/2019/01/4357307dfdfd456e2f382bc90e4603d6.jpeg" />
        <span class="title">NCIS : Los Angeles – Saison 10</span>
      <div class="back">
      <p>
      Deux agents du NCIS (Naval Criminal Investigative Service) opérent dans la division OPS du bureau de Los-Angeles. Leur mission : déjouer les attentats et autres menaces terroristes par tout les moyens
      </p>
      <button>
      Watch
      </button>
      </div>
    </a>
    <a class="imageCard">
        <img src="https://upload.megastreaming.ws/2019/01/4357307dfdfd456e2f382bc90e4603d6.jpeg" />
        <span class="title">NCIS : Los Angeles – Saison 10</span>
      <div class="back">
      <p>
      Deux agents du NCIS (Naval Criminal Investigative Service) opérent dans la division OPS du bureau de Los-Angeles. Leur mission : déjouer les attentats et autres menaces...

CSS

body{
  background-image: url('http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
}
.u {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
}

.u li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}
body {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
}
* {
  box-sizing: border-box;
}
.nav-container > a{
  float:left;
  position: relative;
  top:-16px;
  font-size:24px;
  color: #fff;
  cursor:pointer;
  margin-right: 40px;
} 
nav > a{
  display:none;
} 
nav > a > from > input{
  display:none;
}
.nav-container > a > from > input{
  width:330px;
  background: rgba(0,0,0,0.2);
  border: solid 1px  rgba(255,255,255,0.5);
  border-radius: 5px;
  font-size:22px;
  text-align:center;
  color: #fff;
}
nav {
  display:block;
  padding: 40px;
  background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
}
nav ul {
  float: right;
  position: absolute;
  right: 0;
  top: 24px;
  right: 13px;
}
nav ul li {
  display: inline-block;
  float: left;
}
nav ul li:not(:first-child) {
  margin-left: 25px;
}
nav ul li a {
  display: inline-block;
  outline: none;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  letter-spacing: 0.04em;
}
nav ul li a:hover {
  color: #919191;
  text-decoration: none;
}
@media screen and (max-width: 960px) {
  nav > a{
  display:block;
  float:left;
  position: relative;
  top:-16px;
  font-size:24px;
  color: #fff;
  cursor:pointer;
  margin-right: 40px;
} 
nav > a > from > input{
  display:block;
  width:40vw;
  background: rgba(0,0,0,0.2);
  border: solid 1px  rgba(255,255,255,0.5);
  border-radius: 5px;
  font-size:22px;
  text-align:center;
  color: #fff;
}
.nav-container > a {
  display:none;
}
  .nav-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width:...

JavaScript

function loadNewpages(a)
{
  if(a.scrollTop == a.scrollTopMax)
  {
  	alert('go');
  }
}