<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style type="text/css">
.grid{
width:100%;max-width:800px;margin:40vh auto 0 auto;
display:grid;grid-template-columns:15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px;
grid-template-rows:15px auto;
}
.grid .self{}
.grid .self.circle{background:#777;border-radius:50%;transition:300ms background;}
.grid .self.circle:hover{background:#cc0000;}
.grid .self.border{position:relative;}
.grid .self.border:before{content:"";position:absolute;z-index:1;left:0;top:50%;width:100%;height:2px;transform:translate(0,-50%);background:#777;}
.grid .self.number{padding:4px 0 0 0;justify-self:center;color:#777;}
.grid .self.space{}
</style>
</head>
<body>
<div class="grid">
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self number">1</div>
<div class="self space"></div>
<div class="self number">2</div>
<div class="self space"></div>
<div class="self number">3</div>
<div class="self space"></div>
<div class="self number">4</div>
<div class="self space"></div>
<div class="self number">5</div>
<div class="self space"></div>
<div class="self number">6</div>
<div class="self space"></div>
<div class="self number">7</div>
<div class="self space"></div>
<div class="self number">8</div>
<div class="self space"></div>
<div class="self number">9</div>
<div class="self space"></div>
<div class="self number">10</div>
</div>
</body>
</html>