Html CSS网格不会对齐

.panel\u包装器{
显示：网格；
网格模板柱：1fr 1fr 1fr；
填料：2米；
}
.小组讨论内容{
边缘底部：1米；
边框：实心；
显示：网格；
网格柱：2/3；
}
.面板\导航\左侧{
显示：网格；
网格柱：1/2；
边框：实心；
}
.面板\导航\右侧{
显示：网格；
网格柱：3/4；
边框：实心；
}
.导航{
字号：3em；
}

内容
美国银行
向前地

使用

顺序解决了问题

：

演示（内容较短，因为您设置了

页边距底部

）

.panel\u包装器{
显示：网格；
网格模板柱：1fr 1fr 1fr；
填料：2米；
}
.小组讨论内容{
边缘底部：1米；
边框：实心；
显示：网格；
网格柱：2/3；
顺序：2；
}
.面板\导航\左侧{
显示：网格；
网格柱：1/2；
边框：实心；
顺序：1；
}
.面板\导航\右侧{
显示：网格；
网格柱：3/4；
边框：实心；
顺序：3；
}
.导航{
字号：3em；
}

内容
美国银行
向前地

只需添加

网格行：1/2到所有元素。另外，如果不想创建子栅格，请删除栅格元素的
display:grid
。内容的对齐问题来自页边距底部


.panel\u包装器{
显示：网格；
网格模板柱：1fr 1fr 1fr；
填料：2米；
}
.小组讨论内容{
边缘底部：1米；
边框：实心；
网格柱：2/3；
网格行：1/2；
}
.面板\导航\左侧{
网格柱：1/2；
网格行：1/2；
边框：实心；
}
.面板\导航\右侧{
网格柱：3/4；
网格行：1/2；
边框：实心；
}
.导航{
字号：3em；
}

内容
美国银行
向前地
您可以使用
order
属性，但也可以使用
网格行：1
属性将其强制到第一行。我最喜欢的定义布局的方法是使用网格区域，但我认为它看起来更干净