如何将顶部3行方块右移3个单位，与底部行指定区域对齐？

问题背景 #

现有布局包含38个方块：顶部row1、row2、row3每行各8个，底部row4有14个。需要将顶部3行向右偏移3个方块的宽度，使其与row4的D11到K11方块精准对齐。

当前代码 #

HTML代码 #

<body>
    <div class="container">
        <ul>
            <div class="div" id="row1">
                <li class="square" id="D14"></li>
                <li class="square" id="E14"></li>
                <li class="square" id="F14"></li>
                <li class="square" id="G14"></li>
                <li class="square" id="H14"></li>
                <li class="square" id="I14"></li>
                <li class="square" id="J14"></li>
                <li class="square" id="K14"></li>
            </div>
            <div class="div" id="row2">
                <li class="square" id="D13"></li>
                <li class="square" id="E13"></li>
                <li class="square" id="F13"></li>
                <li class="square" id="G13"></li>
                <li class="square" id="H13"></li>
                <li class="square" id="I13"></li>
                <li class="square" id="J13"></li>
                <li class="square" id="K13"></li>
            </div>
            <div class="div" id="row3">
                <li class="square" id="D12"></li>
                <li class="square" id="E12"></li>
                <li class="square" id="F12"></li>
                <li class="square" id="G12"></li>
                <li class="square" id="H12"></li>
                <li class="square" id="I12"></li>
                <li class="square" id="J12"></li>
                <li class="square" id="K12"></li>
            </div>
            <div class="div" id="row4">
                <li class="square" id="A11"></li>
                <li class="square" id="B11"></li>
                <li class="square" id="C11"></li>
                <li class="square" id="D11"></li>
                <li class="square" id="E11"></li>
                <li class="square" id="F11"></li>
                <li class="square" id="G11"></li>
                <li class="square" id="H11"></li>
                <li class="square" id="I11"></li>
                <li class="square" id="J11"></li>
                <li class="square" id="K11"></li>
                <li class="square" id="L11"></li>
                <li class="square" id="M11"></li>
                <li class="square" id="N11"></li>
            </div>
        </ul>
      </div>
</body>

CSS代码 #

*{
    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);
}

可行方案 #

方案1：直接添加左外边距偏移 #

每个方块宽度60px，间距0.5px，3个方块的总宽度+间距为 3*(60px + 0.5px) = 181.5px。给顶部三行添加该值的左外边距即可对齐：

#row1, #row2, #row3 {
    margin-left: 181.5px;
}

方案2：用伪元素模拟占位方块 #

给顶部行的容器添加伪元素，替代空方块的占位效果，无需修改HTML结构：

#row1::before, #row2::before, #row3::before {
    content: "";
    display: inline-block;
    width: calc(3*(60px + 0.5px));
}

方案3：修正HTML结构后用Grid布局优化 #

注意：原HTML中<ul>直接包含<div>不符合语义规范，建议将每行的<div>替换为<li>，方块改用<span>：

<ul>
    <li class="row" id="row1">
        <span class="square" id="D14"></span>
        <span class="square" id="E14"></span>
        <!-- 其余方块 -->
    </li>
    <!-- 其余行 -->
</ul>

之后给顶部行添加左内边距实现偏移：

#row1, #row2, #row3 {
    padding-left: calc(3*(60px + 0.5px));
}

内容的提问来源于stack exchange，提问作者Eskow