Георгий777,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Grid</title>
<style type="text/css">
.output {
display:flex;
flex-wrap: wrap;
justify-content: center;
width: 603px;
margin: 50px auto;
}
.inner {
display: flex;
flex-basis: 150px;
height: 80px;
background: #ccc;
border: 1px solid gray;
text-align: center;
line-height: 80px;
}
.inner:hover {
cursor: pointer;
}
.inner span {
font-size: 48px;
opacity: 0;
width: 100%;
height: 100%;
transition: 1s;
}
.inner.ok span {
transition: .4s;
opacity: 1;
}
</style>
</head>
<body>
<div class="output">
<div class="inner"><span>1</span></div>
<div class="inner"><span>3</span></div>
<div class="inner"><span>9</span></div>
<div class="inner"><span>5</span></div>
<div class="inner"><span>4</span></div>
<div class="inner"><span>1</span></div>
<div class="inner"><span>3</span></div>
<div class="inner"><span>8</span></div>
<div class="inner"><span>9</span></div>
<div class="inner"><span>5</span></div>
<div class="inner"><span>4</span></div>
<div class="inner"><span>8</span></div>
</div>
<script>
var ar = [], timer, duration = 1000;
[].forEach.call(document.querySelectorAll(".inner"), function(item) {
item.addEventListener("click", function() {
if (item.classList.contains("ok")) {
return;
}
window.clearTimeout(timer);
item.classList.add("ok");
ar.push(item);
if (ar.length == 2) {
if (ar[0].textContent == ar[1].textContent) {
ar = [];
} else {
ar[0].classList.remove("ok");
ar = [item];
}
}
if(ar.length) timer = window.setTimeout(function() {
ar[0].classList.remove("ok");
ar = [];
}, duration);
});
});
</script>
</body>
</html>