<div class="first-face"> <span class="pip"></span> </div> <div class="second-face"> <span class="pip"></span> <span class="pip"></span> </div> <div class="third-face"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="fourth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> <div class="fifth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> <div class="sixth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> </div>
body{ background-color: #000000; display: flex; justify-content: space-between; flex-wrap: wrap; } [class$="face"]{ margin: 16px; padding: 4px; background-color: #e7e7e7; width: 107px; height: 107px; object-fit: contain; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; border-radius: 10%; } .pip { display: block; width: 24px; height: 24px; border-radius: 50%; margin: 4px; background-color: #333; box-shadow: inset 0 3px #111, inset 0 -3px #555; } .first-face{ display: flex; justify-content: center; align-items: center; } .second-face{ display: flex; justify-content: space-between; span:nth-child(2){ align-self: flex-end; } } .third-face{ display: flex; justify-content: space-between; span:nth-child(2){ align-self: center; } span:nth-child(3){ align-self: flex-end; } } .fourth-face,.sixth-face{ display: flex; justify-content: space-between; .column{ display:flex; flex-direction: column; justify-content: space-between; } } .fifth-face{ display: flex; justify-content: space-between; .column{ display:flex; flex-direction: column; justify-content: space-between; &:nth-of-type(2){ justify-content: center; } } }