Grid Gallery

by velo_ninja

HTML

<div class="grid"></div>
<div class="grid"></div>

CSS

:root {
  --color-1: #D9E2F3;
  --color-2: #B4C6E7;
  --color-3: #8EAADB;
  --color-4: #2F5496;
  --color-5: #1F3864;
}

body {
  font-family: sans-serif;
}

.grid {
  width: 100%;
  height: 100vw;
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  margin-bottom: 10px;
}

.grid > .cell {
  position: relative;
}

.grid > .cell:hover {
  cursor: pointer;
}

.grid > .cell:nth-of-type(odd) {
  background: var(--color-1);
}

.grid > .cell:nth-of-type(even) {
  background: var(--color-2);
}

.grid > .cell:nth-of-type(1) {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
}

.grid > .cell:nth-of-type(2) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / span 2;
}

.grid > .cell:nth-of-type(3) {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1 / span 3;
}

.grid > .cell:nth-of-type(4) {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 2;
  grid-row: 4 / span 2;
}

.grid > .cell:nth-of-type(5) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  grid-row: 3 / span 3;
}

.grid > .cell:nth-of-type(6) {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 4;
  -ms-grid-row-span: 2;
  grid-row: 4 / span 2;
}

.grid > .cell:nth-of-type(7) {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 6;
  -ms-grid-row-span: 2;
  grid-row: 6 / span 2;
}

.grid > .cell:nth-of-type(8) {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
  -ms-grid-row: 6;
  -ms-grid-row-span: 2;
  grid-row: 6 / span 2;
}

.grid > .cell:nth-of-type(9) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  -ms-grid-row: 8;
  -ms-grid-row-span: 2;
  grid-row: 8 / span 2;
}

.grid > .cell:nth-of-type(10) {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 8;
  -ms-grid-row-span: 2;
  grid-row: 8 / span 2;
}

.grid > .cell >...

JavaScript

$(document).ready(function() {
	console.log($(window).width());
	for (let i = 0; i < 10; i++) {
  	$(".grid").append(
    	`<div class="cell"><div class="cell-title">Cell ${i+1}</div></div>`
    );
  }
});