body { background-color: green; } #pins { display: grid; grid-template-columns: auto auto auto; grid-gap: 30px; padding: 10px; } .pin { border: 1px solid rgba(0, 0, 0, 0.8); } .ul { padding-top:50px; width:100px; } .checkers_list { list-style-type: none; padding-top:50px; } #pin-1 { grid-column-start: 12; grid-row-start: 2; grid-row-end: 3; } #pin-2 { grid-column-start: 11; grid-row-start: 2; grid-row-end: 3; } #pin-3 { grid-column-start: 10; grid-row-start: 2; grid-row-end: 3; } #pin-4 { grid-column-start: 9; grid-row-start: 2; grid-row-end: 3; } #pin-5 { grid-column-start: 8; grid-row-start: 2; grid-row-end: 3; } #pin-6 { grid-column-start: 7; grid-row-start: 2; grid-row-end: 3; } #pin-7 { grid-column-start: 6; grid-row-start: 2; grid-row-end: 3; } #pin-8 { grid-column-start: 5; grid-row-start: 2; grid-row-end: 3; } #pin-9 { grid-column-start: 4; grid-row-start: 2; grid-row-end: 3; } #pin-10 { grid-column-start: 3; grid-row-start: 2; grid-row-end: 3; } #pin-11 { grid-column-start: 2; grid-row-start: 2; grid-row-end: 3; } #pin-12 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 3; } #pin-13 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 2; } #pin-14 { grid-column-start: 2; grid-row-start: 1; grid-row-end: 2; } #pin-15 { grid-column-start: 3; grid-row-start: 1; grid-row-end: 2; } #pin-16 { grid-column-start: 4; grid-row-start: 1; grid-row-end: 2; } #pin-17 { grid-column-start: 5; grid-row-start: 1; grid-row-end: 2; } #pin-18 { grid-column-start: 6; grid-row-start: 1; grid-row-end: 2; } #pin-19 { grid-column-start: 7; grid-row-start: 1; grid-row-end: 2; } #pin-20 { grid-column-start: 8; grid-row-start: 1; grid-row-end: 2; } #pin-21 { grid-column-start: 9; grid-row-start: 1; grid-row-end: 2; } #pin-22 { grid-column-start: 10; grid-row-start: 1; grid-row-end: 2; } #pin-23 { grid-column-start: 11; grid-row-start: 1; grid-row-end: 2; } #pin-24 { grid-column-start: 12; grid-row-start: 1; grid-row-end: 2; }