CSS Grid侧边放置div失效：如何将div放在已布局CSS Grid旁

之前的float实现失效的核心原因：

• 你给.body-wrapper设置float:left但没有指定宽度，容器宽度会随内部块级子元素自动撑开
• .grid-wrapper作为块级Grid容器，默认会占满父容器100%宽度，同级的.menu-div就算设置了float，也会因为剩余宽度不足被挤到Grid容器下方，这是float布局遇到块级全宽元素时的固有换行问题，靠微调浮动属性很难彻底解决
• 另外你给Grid容器额外加的float:left完全多余，还会让Grid容器宽度异常收缩，破坏原本的网格比例

方案1（最贴合现有Grid搭建逻辑）：直接把侧边栏纳入Grid布局 #

你原本定义Grid模板时就在每一行预留了"m m"的侧边区域，完全没必要把侧边栏放到Grid容器外面，直接调整Grid列分配即可：

• 把.menu-div移动到.grid-wrapper的内部，和其他网格子元素同级
• 修改Grid模板的列宽和区域定义，给侧边栏留出固定列宽

.grid-wrapper {
    display: grid;
    /* 列设置：1份宽度给侧边栏，9份宽度给原有内容列，整体侧边栏占比刚好10% */
    grid-template-columns: 1fr 9fr;
    grid-template-rows: .5fr .5fr 2fr 2fr;
    grid-template-areas: 
    "sidebar l l t t t t t t t"
    "sidebar p p i i i i i i i"
    "sidebar p p i i i i i i i"
    "sidebar p p f f f f f f f";
    grid-gap: 3px;
    /* 删掉原来的float:left */
}
/* 给现有网格子元素补全区域匹配（对应你原有的类名） */
.logo { grid-area: l; }
.title { grid-area: t; }
.image { grid-area: i; }
.feature { grid-area: f; }
.padding { grid-area: p; }
.menu-div {
    grid-area: sidebar;
    height: 100vh;
    background-color: green;
    /* 删掉原来的float:left，宽度自动撑满所属的Grid列 */
}
/* 清理父容器多余的浮动样式 */
.body-wrapper {
    width: 100%;
    /* 删掉原来的float:left、overflow:hidden */
}

方案2（最小改动量，不用调整原有Grid结构）：父容器用Flex横向排列 #

完全保留你现有两个子元素的结构，只把父容器的浮动逻辑换成Flex：

.body-wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
    /* 删掉原来的float:left、overflow:hidden */
}
.grid-wrapper {
    /* 保留原有Grid模板、grid-gap的设置不变 */
    flex: 1; /* 自动占满侧边栏以外的剩余宽度 */
    /* 删掉原来的float:left */
}
.menu-div {
    height: 100vh;
    width: 10%;
    background-color: green;
    /* 删掉原来的float:left */
}

方案3（不修改父级布局属性）：绝对定位浮层实现 #

让侧边栏直接脱离文档流，浮在Grid侧边，不会被推到下方：

.body-wrapper {
    position: relative; /* 作为定位参照 */
    width: 100%;
    /* 删掉原来的float:left、overflow:hidden */
}
.menu-div {
    position: absolute;
    left: 0; /* 放右侧就改成right:0 */
    top: 0;
    height: 100vh;
    width: 10%;
    background-color: green;
    /* 删掉原来的float:left */
}
/* 给Grid容器留出和侧边栏同宽的外边距，避免内容被浮层遮挡 */
.grid-wrapper {
    margin-left: 10%; /* 侧边栏在右侧就改成margin-right:10% */
    /* 删掉原来的float:left */
}

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