CSS Grid布局无法正常显示：左侧按钮错位到第二行如何解决？

1. Grid的grid-template-areas规则不允许同一布局模板内给不同区域设置重复名称，你代码中第一行布局将左右两个按钮区域都命名为botton，导致Grid无法正确识别区域划分，布局逻辑直接失效。
2. 仅在父容器定义了区域模板，没有给对应的子元素声明grid-area属性绑定到指定区域，Grid无法自动将元素匹配到你预期的位置。
3. 图片行内样式存在语法错误，style="width:30px,height:30px"中属性间应该用分号分隔而非逗号，该问题虽不直接导致布局错位，但会引发按钮尺寸样式不生效。

修改Grid布局定义和子元素属性，步骤如下：

1. 调整grid-template-areas的命名，给左右两个按钮设置不同的区域名
2. 给所有子元素添加grid-area属性，绑定到对应区域
3. 修正行内样式的语法错误
4. 可选添加列宽配置和垂直对齐规则，优化布局展示效果

修改后完整代码如下：

修正后CSS #

.containerport {
   display: grid;
   grid-template-areas:
       "left-btn heading right-btn"
       "item item item"
       "text text text";
   /* 配置列宽：左右按钮适配内容宽度，中间标题占剩余空间 */
   grid-template-columns: auto 1fr auto;
   grid-gap: 10px;
   padding-top: 25px;
   padding-bottom: 25px;
   width: 60%;
   height: auto;
   margin: 0 auto;
   /* 顶部元素垂直居中对齐 */
   align-items: center;
}
.left-btn {
   grid-area: left-btn;
}
.heading {
   grid-area: heading;
   text-align: center;
}
.right-btn {
   grid-area: right-btn;
}
.item {
   grid-area: item;
}
.text {
   grid-area: text;
}

修正后HTML #

<div class="containerport">
    <div class="left-btn">
        <img src="img/botãoblank1.png" style="width:30px;height:30px">
    </div>
    <div class="heading">
        <h1>01</h1>
    </div>
    <div class="right-btn">
        <a href="mainp2.html">
            <img src="img/botão2.png" style="width:30px;height:30px">
        </a>
    </div>
    <div class="item">
         <img src="img/01.png">
    </div>
    <div class="text">
         <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
    </div>
</div>

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