Live Code Editor

Try it yourself..

Playing card CSS Grid eCommerce layout | Try it

CSS Grid eCommerce Layout

Playing card CSS Grid eCommerce layout.

References : https://codepen.io/andybarefoot/pen/Gwggor

HTML

<ul>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Odyssey React Shield</h2>
      <p>$130</p>
      <p>$130</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>LeBron 16</h2>
      <p>$185</p>
      <p>$185</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Epic React Flyknit</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Max 97 Premium</h2>
      <p>$180</p>
      <p>$180</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Motion Flyknit 2018</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free RN Flyknit 2018</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Rise React Flyknit LMTD</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Flyknit Racer G</h2>
      <p>$175</p>
      <p>$175</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike EXP-X14 Premium iD</h2>
      <p>$160</p>
      <p>$160</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Free x Retcon</h2>
      <p>$120</p>
      <p>$120</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Air Force 1 '07 Suede</h2>
      <p>$90</p>
      <p>$90</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
    </div>
  </li>
  <li>
    <div class="details">
      <h2>Nike Metcon 4 iD</h2>
      <p>$150</p>
      <p>$150</p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
    </div>
  </li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway');

body{
  background: #5c746a;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVQoU2NcWuD6v2nfFwZcgFFdz/I/TlkGBobhoQAAGHYPccmxFlIAAAAASUVORK5CYII=) repeat;
  color: #1c1c1c;
  font-family: 'Raleway', sans-serif;
  font-size: 5vw;
}
ul {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  transform-origin: top right;
  transform: skewY(-4.398705355deg);
  margin: 0 6.4vw 0 28%;
}
li{
  transform-origin: top left;
  transform: skewY(4.398705355deg) rotatez(14.03624deg);
  padding-top: 150%;
  z-index: 1;
  transition-property: z-index;
  transition-duration: .3s;
}
.details{
  position: absolute;
  z-index: 2;
  width: 98%;
  height: 95%;
  top: 0;
  background-color: #DADDDF;
  border-radius: 2vw;
  box-shadow: inset 0px 0px 0px 7vw #FCF8F4;
  box-sizing: border-box;
  webkit-filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.4));
  transform: rotate(0deg) translate(0, 0);
  transition-property: transform;
  transition-duration: .3s;
}

h2, p, img {
  position: absolute;
  z-index: 4;
}

p{
 font-size:1.4em; 
  background-color: #FCF8F4;
  padding: 2% 2.5% 2% 2.5%;
}
p:nth-child(2n){
  top: 3%;
  left: 5%;
}
p:nth-child(2n+1){
  transform: rotatez(180deg);
  bottom: 3%;
  right: 5%;
}
h2{
  text-align: center;
  width: 122%;
  left: -11%;
  top: 46%;
  transform: rotatez(-45deg);
  background-color: #FCF8F4;
  line-height: 140%;
  transition-property: top;
  transition-duration: .3s;
}
img{
  width: 84%;
  top: 50%;
  left: 50%;
}
img:nth-child(2n){
  transform: translateX(-30%) translateY(5%) rotatez(135deg);
  transition-property: width,transform;
  transition-duration: .3s;
}
img:nth-child(2n+1){
  transform: translateX(-70%) translateY(-105%) rotatez(-45deg);
  transition-property: width,transform;
  transition-duration: .3s;
}

li:hover{ 
  z-index: 4;
}
li:hover h2{ 
  top: 64%;
}
li:hover .details{ 
  transform: rotate(-14.03624deg) translate(5.5%, 15%) scale(1.5);
}
li:hover img:nth-child(2n){ 
  width: 60%;
  transform: translateX(-15%) translateY(60%) rotatez(135deg);
}
li:hover img:nth-child(2n+1){ 
  width: 120%;
  transform: translateX(-65%) translateY(-75%) rotatez(-45deg);
}
@media (min-width:300px) { 
  body{
    font-size: 2.75vw;
  }
  ul {
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 3vw;
    margin: 0 3.9vw 0 15vw;
  }
  .details{
    box-shadow: inset 0px 0px 0px 4vw #FCF8F4;
  }
}

@media (min-width:600px) { 
  body{
    font-size: 1.95vw;
  }
  ul {
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 2vw;
    margin: 0 2.8vw 0 10vw;
  }
  .details{
    box-shadow: inset 0px 0px 0px 2.8vw #FCF8F4;
  }
}

@media (min-width:900px) { 
  body{
    font-size: 1.5vw;
  }
  ul {
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 1.5vw;
    margin: 0 2.2vw 0 8vw;
  }
  .details{
    box-shadow: inset 0px 0px 0px 2.2vw #FCF8F4;
  }
}

@media (min-width:1200px) { 
  body{
    font-size: 1.25vw;
  }
  ul {
    grid-template-columns: repeat(5,1fr);
    grid-column-gap: 1vw;
    margin: 0 1.8vw 0 6.5vw;
  }
  .details{
    box-shadow: inset 0px 0px 0px 1.8vw #FCF8F4;
  }
}

@media (min-width:1500px) { 
  body{
    font-size: 1vw;
  }
  ul {
    grid-template-columns: repeat(6,1fr);
    grid-column-gap: 1vw;
    margin: 0 1.5vw 0 5.5vw;
  }
  .details{
    box-shadow: inset 0px 0px 0px 1.5vw #FCF8F4;
  }
}

Live Code Editor

Playing card CSS Grid eCommerce layout | Try it

CSS Grid eCommerce Layout

HTML

CSS

JavaScript

Output