Как переместить верхние 3 ряда на 3 квадрата ТОЛЬКО вправо? ⇐ CSS

[Anonymous]

В этом коде 38 квадратов. Я пытаюсь переместить 3 строки сверху на 3 квадрата вправо.
Я пробовал разные способы, но это не работает. Как мне переместить эти 3 строки сверху на 3 квадрата вправо, чтобы они были выровнены по центру?
Если вы посмотрите на выходные данные, то верхние 3 строки (8 X 3 = 24 квадрата) находятся просто в левой части. Я пытаюсь выровнять его по середине. Нижний ряд (строка 4) содержит всего 14 квадратов. Я пытаюсь выровнять верхние 3 строки между квадратом 4 и 11 строки 4 (строка внизу).

*{
margin: 0;
padding: 0;
}

body {
display: flex;
place-items: center;
justify-content: center;
overflow-x: hidden;
height: 100vh;
background-color: #c0c0c0;
}

.container{
display: grid;
place-items: center;
justify-content: center;
}

.div{
display: flex;
}

ul{
display: grid;
grid-template-columns: 1fr;
}

li{
list-style: none;
display:grid;
place-items: center;
font-size: 0;
}

.square{
margin:.5px;
width: 60px;
height: 60px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);

}



Подробнее здесь: https://stackoverflow.com/questions/784 ... -the-right