使用CSS Grid布局的导航栏如何实现logo左对齐、菜单右对齐？

完全可以实现，你遇到的float失效是正常现象：Grid容器的直接子元素（网格项）的float、clear、vertical-align属性会被自动忽略，不需要用float，直接用Grid自带的对齐属性即可实现需求。

修改要点 #

• 调整.nav的网格列定义，删除不必要的固定间隙，让logo仅占用自身内容宽度，剩余空间全部分配给菜单列
• 删除.logo和.menu的margin: auto属性（这是你当前元素居中的原因）
• 给菜单容器添加justify-self: end属性，让整个菜单容器在自身网格区域内靠右对齐

修改后完整CSS代码 #

.nav {
    height: 80px;
    width: 100%;
    display: grid;
    /* 第一列宽自适应内容，第二列占剩余全部宽度 */
    grid-template-columns: auto 1fr;
    grid-template-rows: 80px;
    /* 可根据需要调整左右内边距，控制logo和菜单距离屏幕边缘的距离 */
    padding: 0 20px;
    box-sizing: border-box;
}

.nav_dark {
    background-color: #1d1733;
}

.menu {
    /* 让菜单在当前网格列靠右对齐 */
    justify-self: end;
    /* 垂直居中，可按需调整 */
    align-self: center;
}

.menu > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu > ul > li {
    display: inline-block;
    margin: 0 10px;
}

.menu > ul > li > a {
    text-decoration: none;
    color: white;
}

.menu > ul > .buttonlist {
    margin: 0 0 0 50px;
}

.menu > ul > li > button {
    padding: 15px 60px;
    margin: 0;
    border-radius: 15px;
    border-width: 0;
    background-color: #c746eb;
    color: white;
    font-weight: bold;
}

.logo {
    /* 垂直居中，可按需调整 */
    align-self: center;
    margin: 0;
}

上述修改完全兼容React技术栈，不需要调整任何JSX结构，仅修改CSS即可生效。如果需要调整logo和菜单之间的间距，直接调整.nav的左右内边距或者菜单的margin-left即可。

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