Skip to content

Instantly share code, notes, and snippets.

@marksumoto

marksumoto/index.html

Created July 17, 2018 00:39
Show Gist options
  • Save marksumoto/87f787c77d87dbbe7d85a1b219ad412b to your computer and use it in GitHub Desktop.
Save marksumoto/87f787c77d87dbbe7d85a1b219ad412b to your computer and use it in GitHub Desktop.
Download ZIP
Isometric eCommerce CSSGrid
Raw
index.html
<!--
16/07/18 - Simplified approach, now works in Safari as well
-->
<h1>Responsive eCommerce layout using CSS Grid</h1>
<h3><a href="https://codepen.io/collection/DapBxW" target="_blank">More CSS Grid layouts</a></h3>
<ul id="productGrid">
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>STAN SMITH</h2>
<p class="price">£74.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>CALIFORNIA 78</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>I-5923 RUNNER PRIDE</h2>
<p class="price">£99.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>ALVARADO</h2>
<p class="price">£70.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>MEXICO 66</h2>
<p class="price">£75.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>NMD_CS2 PRIMEKNIT</h2>
<p class="price">£149.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>GSM</h2>
<p class="price">£80.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</div>
</li>
<li class="product">
<div class="details">
<h2>TIGER ALLY</h2>
<p class="price">£95.00</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png' alt='' />
</div>
<div class="photo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</div>
</li>
<span></span>
</ul>
Raw
isometric-ecommerce-cssgrid.markdown
Raw
script.js
var productCount = 100;
var productsShown = 100;
var maxProdsPerRow = 10;
function addSpacers(){
for(var i=1; i<=productCount; i++){
var node = document.createElement("b");
node.style.gridRow = i;
document.getElementById("productGrid").appendChild(node);
}
resizeGrid();
}
function resizeGrid(){
var w = window.innerWidth;
var nPerRow = 0;
if(w<600) {
nPerRow=1;
}else if(w<900) {
nPerRow=2;
}else if(w<1200) {
nPerRow=3;
}else if(w<1500) {
nPerRow=4;
}else if(w<1800) {
nPerRow=5;
}else if(w<2100) {
nPerRow=6;
}else {
nPerRow=7;
}
var nRows = Math.floor(productCount/nPerRow);
productsShown = nRows*nPerRow;
var spacers = document.getElementById("productGrid").getElementsByTagName("b");
var products = document.getElementById("productGrid").getElementsByTagName("li");
var bottoms = document.getElementById("productGrid").getElementsByTagName("span");
for(var i=0; i<productCount; i++){
if(i<nRows){
spacers[i].style.display = "block";
}else{
spacers[i].style.display = "none";
}
if(i<productsShown){
products[i].style.display = "grid";
}else{
products[i].style.display = "none";
}
}
}
window.onresize = function(){
resizeGrid();
}
window.onload = addSpacers();
Raw
style.css
html {
background:#C9E0D6;
font-family: 'Open Sans Condensed', sans-serif;
color: #5A626F;
}
a{
color: #5A626F;
}
h1{
margin: 20px 20px 10px 20px;
font-size: 5.5vw;
}
h3{
margin: 0 20px 50px 20px;
font-size: 4vw;
}
#productGrid {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: calc(173.2vw/3);
width: 100%;
overflow: hidden;
}
li {
grid-column-end: span 2;
position: relative;
}
.product {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.product>.details {
grid-column: 1;
grid-row: 1;
padding: 5%;
}
.product>.logo {
grid-column: 2;
grid-row: 1;
}
#productGrid > b:nth-child(2n){
grid-column: 1;
}
#productGrid > b:nth-child(2n+1){
grid-column: -2/-1;
}
.product>.logo, #productGrid > b:nth-child(2n){
background-color: #FFEFE5;
clip-path: polygon(0% 0%, 100% 33.333%, 100% 100%, 0% 66.667%, 0% 0%);
-webkit-clip-path: polygon(0% 0%, 100% 33.333%, 100% 100%, 0% 66.667%, 0% 0%);
}
.product>.details, #productGrid > b:nth-child(2n+1){
background-color: #E7FFF4;
clip-path: polygon(0% 33.333%, 100% 0%, 100% 66.667%, 0% 100%, 0% 0%);
-webkit-clip-path: polygon(0% 33.333%, 100% 0%, 100% 66.667%, 0% 100%, 0% 0%);
}
.product>.photo {
grid-column: 1;
grid-row: 1;
grid-column-end: span 2;
z-index: 1;
text-align: center;
}
.product>.details>h2 {
margin-top: 35%;
margin-bottom: 0;
transform: skewY(-30deg);
font-size: 5vw;
}
.product>.details>p {
margin-top: 0;
transform: skewY(-30deg);
font-size: 9.5vw;
}
.product>.logo>img {
opacity: 0.6;
position: absolute;
max-width: 18%;
top: 30%;
right: 5%;
transform: skewY(30deg);
}
.product>.photo>img {
position:absolute;
bottom: -10%;
left: 19%;
max-width: 62%;
-webkit-filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
transition: bottom 0.5s;
}
.product>.photo>img:hover {
bottom: 0%;
}
span {
grid-column: 1/-1;
}
@media (min-width:600px) {
#productGrid{
grid-template-columns: repeat(5,1fr);
grid-auto-rows: calc(173.2vw/5);
}
.product>.details>h2 {
font-size: 3vw;
}
.product>.details>p {
font-size: 6vw;
}
h1{
font-size: 2em;
}
h3{
font-size: 1em;
}
}
@media (min-width:900px) {
#productGrid{
grid-template-columns: repeat(7,1fr);
grid-auto-rows: calc(173.2vw/7);
}
.product>.details>h2 {
font-size: 2vw;
}
.product>.details>p {
font-size: 4vw;
}
}
@media (min-width:1200px) {
#productGrid{
grid-template-columns: repeat(9,1fr);
grid-auto-rows: calc(173.2vw/9);
}
.product>.details>h2 {
font-size: 1.6vw;
}
.product>.details>p {
font-size: 3.3vw;
}
}
@media (min-width:1500px) {
#productGrid{
grid-template-columns: repeat(11,1fr);
grid-auto-rows: calc(173.2vw/11);
}
.product>.details>h2 {
font-size: 1.3vw;
}
.product>.details>p {
font-size: 2.6vw;
}
}
@media (min-width:1800px) {
#productGrid{
grid-template-columns: repeat(13,1fr);
grid-auto-rows: calc(173.2vw/13);
}
.product>.details>h2 {
font-size: 1.1vw;
}
.product>.details>p {
font-size: 2.2vw;
}
}
@media (min-width:2100px) {
#productGrid{
grid-template-columns: repeat(15,1fr);
grid-auto-rows: calc(173.2vw/15);
}
.product>.details>h2 {
font-size: 0.95vw;
}
.product>.details>p {
font-size: 1.6vw;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment